javascript - 为什么 event.currentTarget null 和 e.target 总是一样的?
问题描述
我很好奇为什么输入 Event.listener 中的e.currenTarget为空,而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 做到了。我认为如果我附加这样的事件,它将覆盖旧事件。
解决方案
推荐阅读
- c# - 正确声明一个数组?
- java - 什么是正确的方法,从不同的方法关闭 FileHandler
- unity3d - 通过实时文本馈送控制游戏对象 || 团结初学者
- compiler-errors - 粗短不能在 raspbian 拉伸上编译
- python - 四舍五入numpy数组的浮点值时出现TypeError
- scikit-learn - 在 Sklearn 的 AffinityPropagation 中打印每个集群的顶级术语
- java - 如何通过 java 使用 AWS lambda 层(层在 Lambda 中是成功的)...错误是 NoClassDefFoundError
- java - 如何配置 SOAP over HTTP 侦听器
- python - 屏蔽数据框在 index.levels 中留下了意外的值
- java - dateParser 返回未加速的结果?