Question

我很好奇为什么输入Event.listener中的 e.currenTarget 为空，而 e.target 总是总是第一个元素被单击？

我试图通过单击然后在输入字段中插入数字来更改每个折线的ID。但是，如果我要在更改第一个Element之后更改第二个Element的ID，则 e.target 始终引用单击的第一个Element。

如何避免这种情况？有解决方法吗？

测试代码

HTML

<html>
 <head>
 </head>
 <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.querySelectorAll("polyline");
svgHolder.forEach(function(elem){
    elem.addEventListener("click",function(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);
  }
  console.log(e.currentTarget);
  console.log(e.target);
  //event listener, fired when the value of the input field changes
  input.addEventListener('input', function (event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    console.log(e.currentTarget);
    console.log(e.target);
    //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;
}

编辑/解决方案 好，我可以解决它。

var input = document.getElementById("attributeID");

        input.onchange = function(event){

        event.preventDefault();
        event.stopImmediatePropagation();

        target.parentElement.setAttribute("id",input.value);

    };

onchange成功了。我认为，如果我附加这样的事件，它将覆盖旧事件。

为什么event.currentTarget null和e.target总是相同？

0 个答案: