为什么JavaScript Event.target无法正常工作

Question

I'm doing a drawing Web Application where I can draw Polyline, BezierCurves, Polygons etc. 我正在做一个Web应用程序绘图，可以在其中绘制折线，BezierCurves，多边形等。

My problem is: 我的问题是：

I'm assigning every created Element a unique ID. 我为每个创建的元素分配一个唯一的ID。 For Example: first Element gets the ID => 0, the second => 1, third => 2 ....... 例如：第一个元素的ID => 0，第二个=> 1，第三个=> 2 .......

But the User should have the possibility to change the ID of every Element by clicking the target element and insert a Number in the input field. 但是，用户应该可以通过单击目标元素并在输入字段中插入数字来更改每个元素的ID。

I'm using e.target to get the clicked element and e.target.parentElement to get the parent and the ID. 我正在使用e.target来获取clicked元素，并使用e.target.parentElement来获取父元素和ID。

But when the input-Event is fired e.target is always the same. 但是当输入事件被触发时， e.target总是相同的。 It references to the first Element clicked and not to the actual target Element. 它引用的是单击的第一个元素，而不是实际的目标元素。 So I'm always editing the ID of the first Element clicked. 因此，我总是在编辑单击的第一个Element的ID。

What am I doing wrong? 我究竟做错了什么？

Here is the Code for testing: 这是测试代码：

HTML 的HTML

<html>
    <body>
        <div class="form-group">
            <input type="number" class="form-control" id="attributeID" placeholder="0" min="0" max="1000" step="1" value="">
        </div>
        <svg id="svgDraw" type="image/svg+xml" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1587" height="580">
            <g id="g2"></g>
            <rect width="1587" height="580" id="rect1" style="fill: none; pointer-events: all;"></rect>
            <g id="gElement"></g>
            <g id="path">
                <g class="polyline" id="0" value="line">
                    <polyline points="322.99999999999994,239,393.99999999999994,142.00000000000006" id="pathPoints0" fill="none" stroke="#186AA9" stroke-width="4"></polyline>
                    <circle cx="322.99999999999994" cy="239" r="2"></circle>
                    <circle cx="393.99999999999994" cy="142.00000000000006" r="2"></circle>
                </g>
                <g class="polyline" id="1" value="line">
                    <polyline points="560,241.00000000000006,577.9999999999999,163" id="pathPoints1" fill="none" stroke="#186AA9" stroke-width="4"></polyline>
                    <circle cx="560" cy="241.00000000000006" r="2"></circle>
                    <circle cx="577.9999999999999" cy="163" r="2"></circle>
                </g>
            </g>
        </svg>
        <script src="test.js"></script>
    </body>
</html>

JS JS

//Event-Listener, fired when clicked on a line
var svgHolder = document.getElementById("path");
svgHolder.addEventListener("click", selectElement, false);

function selectElement(e) {
  e.stopImmediatePropagation();
  e.preventDefault();
  console.log(e.target.parentElement);

  var input = document.getElementById("attributeID");
  //colorize the clicked element and call getAttribute Function
  if (e.target.nodeName == "polyline") {
    e.target.setAttribute("stroke", "#E9203B");
    getAttributes(e);
  } else if (e.target.nodeName == "polygon") {
    e.target.setAttribute("stroke", "#E9293B");
    getAttributes(e);
  } else if (e.target.nodeName == "path") {
    e.target.setAttribute("stroke", "#E9293B");
    getAttributes(e);
  }
  //event listener, fired when the value of the input field changes
  input.addEventListener('input', function (event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    //here the e.target is not changing and always refers to the first element clicked
    e.target.parentElement.setAttribute("id", input.value);
  }, false);

  var c = document.getElementById("rect1");
  c.addEventListener("click", function () {
    if (e.target.nodeName == "polyline") {
      e.target.setAttribute("stroke", "#186AA9");
    } else if (e.target.nodeName == "polygon") {
      e.target.setAttribute("stroke", "none");
    } else if (e.target.nodeName == "path") {
      e.target.setAttribute("stroke", "grey");
    }
  });
}
//set the value of the input field      
function getAttributes(element) {
  var id = element.target.parentElement.getAttribute("id");
  document.getElementById("attributeID").value = id;
}

Answer 1

尝试在html标签中添加内联侦听器并将事件传递给它：

<g id="path" onclick="selectElement(event)">

为什么JavaScript Event.target无法正常工作

问题描述

Here is the Code for testing: 这是测试代码：

1 个解决方案

解决方案1
0 2018-12-13 15:04:17

为什么JavaScript Event.target无法正常工作

问题描述

Here is the Code for testing: 这是测试代码：

1 个解决方案

解决方案1 0 2018-12-13 15:04:17

解决方案1
0 2018-12-13 15:04:17