检测事件气泡中的元素
检测事件气泡中的元素
提问于 2020-07-23 01:23:30
我有这个html代码：
<div class="container">
<div class="parent">
<!-- P Element Completely On Parent -->
<p style="width: 100%; height: 100%;">Hello</p>
</div>
........
</div>这是我的Javascript：
document.querySelector(".container").addEventListener("click", (e) => {
if ( e.target == document.querySelector(".parent") ) {
alert(" It Worked!!! ")
}
},
true // <--- bubbling
)- I不想添加像jQuery这样的库，etc...
- I不想设置p元素
style="pointer-events: none" - I想要使用动态代码(不要使用e.target.parentElement)
)
是否可以检测到父元素单击而不给出事件(和事件冒泡)？结果代码应该在客户端单击p element
后工作
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-07-23 08:31:59
如果.parent的嵌套是动态的，您可能需要确定从currentTarget到target的路径。然后在路径中搜索您要寻找的特定元素。
// Determines the node path from baseNode to targetNode, by travelling up from
// the targetNode. The retuned array will include both the baseNode and the
// targetNode. If the targetNode is the baseNode an array with one elment is
// returned. Throws an error if baseNode is not an ancestor of targetNode.
function nodePath(baseNode, targetNode, currentPath = []) {
currentPath.unshift(targetNode);
if (targetNode == baseNode) return currentPath;
return nodePath(baseNode, targetNode.parentNode, currentPath);
}
document
.querySelector(".container")
.addEventListener("click", ({currentTarget, target}) => {
const path = nodePath(currentTarget, target);
const parent = path.find(node => node.matches(".parent"));
if (parent) {
console.log("It Worked!");
}
});<div class="container">
<div class="parent">
<!-- P Element Completely On Parent -->
<p style="width: 100%; height: 100%;">Hello</p>
</div>
........
</div>
Stack Overflow用户
发布于 2020-07-23 01:51:33
是的，你可以试试这个。
document.querySelector(".container").addEventListener("click", (e) => {
var parentel = e.target.parentElement
if (parentel.className == "parent") {
alert(" It Worked!!! ")
}
})<div class="container">
<div class="parent">
<!-- P Element Completely On Parent -->
<p class- "child" style="width: 100%; height: 100%;">Hello</p>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63045456
复制相关文章
相似问题
腾讯云开发者
