为什么javascript Event.target不能工作
为什么javascript Event.target不能工作
提问于 2018-12-13 14:11:22
我正在做一个绘图网络应用程序，在那里我可以绘制多边形，BezierCurves，多边形等。
我的问题是：
例如:第一个元素获得ID => 0，第二个=> 1，第三个=> 2.
但是用户应该可以通过单击目标元素并在输入字段中插入一个数字来更改每个元素的ID。
我使用e.target.parentElement获取单击元素，使用e.target获取父元素和ID。
但是，当输入事件被触发时，e.target总是相同的。它引用单击的第一个元素，而不是实际的目标元素。所以我总是编辑点击的第一个元素的ID。
我做错了什么？
以下是测试守则：
<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;
}回答 1
Stack Overflow用户
发布于 2018-12-13 15:04:17
尝试在html标记中添加内联侦听器并向其传递事件：
<g id="path" onclick="selectElement(event)">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53763769
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号