為什么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