【发布时间】：2018-12-13 14:11:22
【问题描述】：
我正在做一个绘图 Web 应用程序，我可以在其中绘制折线、贝塞尔曲线、多边形等。
我的问题是：
我正在为每个创建的元素分配一个唯一的 ID。例如：第一个元素的 ID => 0，第二个 => 1，第三个 => 2 .......
但用户应该可以通过单击目标元素并在输入字段中插入一个数字来更改每个元素的 ID。
我使用 e.target 来获取被点击的元素，使用 e.target.parentElement 来获取父元素和 ID。
但是当输入事件被触发时 e.target 总是一样的。它引用第一个单击的元素，而不是实际的目标元素。 所以我总是在编辑第一个被点击的元素的 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;
}
【问题讨论】：
标签： javascript events target