时间戳

首页 > 解决方案 > 如何确定两个 HTML 事件具有相同的来源（然后确定“事件已处理”）

javascript - 如何确定两个 HTML 事件具有相同的来源（然后确定“事件已处理”）

问题描述

如何确定两个 HTML 事件具有相同的来源？我需要的是只处理一次点击事件（没有 stopPropogation 因为点击的 stopPropogation 是“不适合下拉菜单、模式等”）

originalEvent 的比较（使用 jQuery）if (event.originalEvent != processedEvent.originalEvent)效果很好，但我想在 vanilla js 中做同样的事情。

我们是否有方便的纯 js 方法来做同样的事情？

var processedEvent = null;

$("#myButton").click(
   function(event){
       console.log("this should be processed once")
       processedEvent = event;
       
   }
)

$("#myPanel").click(
   function(event){
       if (event.originalEvent == processedEvent.originalEvent)
          console.log("nice. we are going to ingore event")
       else
          console.log("error. event processed second time")
       processedEvent=null;
   }
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myPanel">
<button id="myButton">Click Me jQuery</button>
</div>
</div>

标签： javascripthtmldom-events

解决方案

PreventDefault 是一种非常标准的方法。您调用event.preventDefault()最里面的处理程序，然后您的外部处理程序应该检查if (!event.isDefaultPrevented()) {jquery 或if (!event.defaultPrevented) {vanilla js。

您可以将自定义属性作为标志添加到事件对象，例如event._customWasHandled = true，然后在以后的处理程序中检查这些属性。

推荐阅读