javascript - 确定之前是否处理过事件

Question

如何确定之前是否已经处理过冒泡事件。

我想处理在.card元素上执行的单击事件。事件处理程序应在该卡中的第一个链接上触发单击事件。如果用户单击该卡中的第二个链接，则该卡的事件处理程序应该什么都不做。

所以我想找到一种方法，如果之前调用了任何事件处理程序（内置或自定义，包括我无法控制的那些）。

编辑

这不是关于我遇到的特定问题的问题，而是关于 DOM 事件处理的一般问题。

编辑 2

对于大众需求（1 条评论 :)）我将添加一些示例代码。

此示例无法完全运行，因为 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>

标签： javascriptdom-eventsevent-bubbling