时间戳

首页 > 解决方案 > 如何检查jQuery中是否已经存在相同的事件处理程序

javascript - 如何检查jQuery中是否已经存在相同的事件处理程序

问题描述

如果两个不同的进程向一个元素添加一个点击处理程序。这两个处理程序都是必需的。我想要做的是检查其中一个处理程序是否已经存在。

我可以用：

$._data(ele, "events")

获取元素上的所有事件，但我怎么知道哪个点击事件处理程序是我想要的？

ele.click(handler1);
ele.click(handler2);

var handlers = $._data(ele,get(0), "events");

if (*some code that finds if handler1 is already there*)
  ...

使用 jQuery 2.1.4（无法更改）。

标签： javascriptjquery

解决方案

寻找特定的处理程序

const handlerIs = ($ele, handler, func) => {
  const events = $._data($ele.get(0), "events");
  func = func.toString();
  return events && 
    events[handler]?.some(ev => ev.handler.toString() === func);
};

const $ele = $("button");

const clicked = () => alert("clicked");

$ele.on("click", clicked)
$ele.on("click", clicked)

if (handlerIs($ele, "click", clicked)) {
  console.log(`click clicked exists on ${$ele.get(0).tagName}`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<button type="button">Mouseover or click</button>

只是寻找点击处理程序

它可以实现为 $fn 被称为 $ele.hasHandler...

const hasHandler = ($ele,handler) => Object.keys($._data($ele.get(0), "events"))
  .filter(key => key===handler).length>0;


const $ele = $("button");

$ele.on("click",function() { alert("clicked") }); // define click once

if (!hasHandler($ele,"click")) { // test before trying again
   $ele.on("click",function() { console.log("another click") }); 
}
else console.log(`click already found on ${$ele.get(0).tagName}`)

/* 
Object.entries($._data($ele.get(0), "events"))
  .forEach(ent => console.log(ent[0],ent[1][0].handler))
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<button type="button">Mouseover or click</button>

推荐阅读