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

Question

我正在做一个Web应用程序绘图，可以在其中绘制折线，BezierCurves，多边形等。

我的问题是：

我为每个创建的元素分配一个唯一的ID。 例如：第一个元素的ID => 0，第二个=> 1，第三个=> 2 .......

但是，用户应该可以通过单击目标元素并在输入字段中插入数字来更改每个元素的ID。

我正在使用e.target来获取clicked元素，并使用e.target.parentElement来获取父元素和ID。

但是当输入事件被触发时， e.target总是相同的。 它引用的是单击的第一个元素，而不是实际的目标元素。 因此，我总是在编辑单击的第一个Element的ID。

我究竟做错了什么？

这是测试代码：

的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

//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无法正常工作

问题描述

这是测试代码：

1 个解决方案

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

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

问题描述

这是测试代码：

1 个解决方案

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

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