如何在没有访问权限的情况下从位于脚本中的 div 中删除 javascript/jquery 悬停事件？

Question

谁能解释一下是否可以从我无权访问的脚本中取消绑定添加到元素的悬停事件。我不能只向它添加指针事件 none 和 css，因为我确实想为这个元素添加一个点击事件。无法使用：

element{
  pointer-events: none;
}

这对我也不起作用：

$(element).unbind('mouseenter mouseleave');

非常感谢任何帮助。

Answer 1

如果事件是通过jQuery挂钩的，你可以这样删除它：

$(element).off("mouseenter mouseleave");

这会删除元素上的 all jQuery-hooked mouseenter 和 mouseleave 事件。更多内容在 the documentation.

为什么 mouseenter 和 mouseleave？因为 hover documentation tells us:

Calling $( selector ).hover( handlerIn, handlerOut ) is shorthand for:
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

如果处理程序没有连接到 jQuery，而是连接到 DOM 的 addEventListener（或者Microsoft 的 attachEvent)，如果没有对处理程序函数的引用，则无法删除处理程序（如果您还没有处理程序函数，则无法获得对处理程序函数的引用）。

您可以通过销毁元素并将其替换为相同的替换元素来有效删除直接附加到元素的所有处理程序。所有现代浏览器都支持outerHTML，可用于此目的：

element.outerHTML = element.outerHTML;
// or with More! jQuery!(tm)
$(element).replaceWith(element.outerHTML);

它看起来像一个空操作，但它不是一个。它完全销毁该元素（及其所有子元素），从而断开它们上的所有处理程序，然后重新创建新的、大部分相同的元素。（某些状态信息，尤其是 select 元素中的信息，可能会丢失。）

示例：

var target = document.getElementById("target");
target.addEventListener("mouseenter", function(e) {
  console.log("mouseenter triggered");
}, false);
$("input[type=button]").on("click", function(e) {
  // Destroy and recreate
  $(target).replaceWith(target.outerHTML);
  console.log("Now, the mouseenter handler won't work anymore");
});

<div id="target">Mouse over me</div>
<input type="button" value="Click to destroy and recreate">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

如何在没有访问权限的情况下从位于脚本中的 div 中删除 javascript/jquery 悬停事件？

How to remove javascript/jquery hover event from div located in script without access?

jquery

hover