问题描述
如何确定冒泡事件之前是否已经处理过。
我想处理在 .card
元素上执行的点击事件。事件处理程序应该在该卡片的第一个链接上触发点击事件。如果用户点击卡片中的第二个链接,卡片的事件处理程序应该什么都不做。
所以我想找到一种方法,如果之前调用过任何事件处理程序(内置或自定义,包括那些我无法控制的)。
编辑
这不是关于我遇到的特定问题的问题,而是关于 DOM 事件处理的一般问题。
编辑 2
此示例无法完全运行,因为 SO 片段中的链接存在限制。我有一个关于 Codepen
的完整示例;
(function () {
var selectors = []
var subs = []
function triggerMouseEvent(
event,target,options
) {
options = Object.assign({
view: window,bubbles: true,cancelable: true
},options)
const e = new MouseEvent(event,options)
setTimeout(function () {
target.dispatchEvent(e)
},10)
}
function delegateClick(selector,subSelectors) {
var selector = selectors.push(selector) - 1;
var sub = subs.push(subSelectors) - 1;
return {selector,sub}
}
function undelegateClick({selector,sub}) {
selectors.splice(selector,1);
subs.splice(sub,1);
}
function evnt(e) {
selectors.forEach(function (selector,index) {
if (e.target.closest(subs[index].join(','))) {return}
var s = e.target.closest(selector)
if (!s) {return}
var selEl
subs[index].find(function (sub) {
return selEl = s.querySelector(sub)
})
if (selEl && e.target !== selEl) {
triggerMouseEvent(e.type,selEl,{
altKey: e.altKey,ctrlKey: e.ctrlKey,MetaKey: e.MetaKey
})
}
})
}
document.addEventListener('click',evnt)
// document.addEventListener('mouSEOver',evnt)
window.delegateClick = delegateClick
window.undelegateClick = undelegateClick
})();
dup = delegateClick('.card',['a.act-on','button.act-on'])
.card {
margin: 20px;
border: 1px solid;
padding: 20px;
}
.card:hover {
background-color: gold;
cursor: pointer;
}
body {
display: flex;
}
<div class="card">
<h1>Click this card</h1>
<p>The action of the following button will be performed</p>
<button class="act-on" onClick="alert('Button pressed!')">Button!</button>
</div>
<div class="card">
<h1>Click this card</h1>
<p>The action of the following link will be performed <p>
<a class="act-on" href="https://example.org" target="_blank">example.org</a>
</div>
<div class="card">
<h1>Click this card</h1>
<p>The action of the following link will be performed</p>
<p>The link is preferred to the button</p>
<button class="act-on" onClick="alert('Button pressed!')">Button!</button>
<a class="act-on" href="https://example.org" target="_blank">example.org</a>
</div>
<div class="card" style="background-color: pink; border-color:red">
<h1>Click this card</h1>
<p><strong>If this button is pressed,the action of the link should not be done</strong></p>
<button class="dont-act-on" onClick="alert('Button pressed!')">Button!</button>
<a class="act-on" href="https://example.org" target="_blank">example.org</a>
</div>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)