我很好奇为什么当前目标输入 Event.listener 中为 null 和e.target总是第一个元素被点击？
我试图通过单击然后在输入字段中插入数字来更改每条折线的 ID。但是如果我想在更改第一个元素后更改第二个元素的 ID，e.target始终引用第一个单击的元素。
我怎样才能避免这种情况？有什么解决方法吗？
测试代码
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 做到了。我认为如果我附加这样的事件，它将覆盖旧事件。
