Question

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

我的问题是：

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

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

我正在使用 e.target 获取被点击的元素，并使用 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标记中添加内联侦听器并将事件传递给它：

IS_CURRENT = 'Y'

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

这是测试代码：

1 个答案: