确定之前是否处理过事件

如何解决确定之前是否处理过事件

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

我想处理在 .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>