Question

如何禁用页面上的所有onclick事件，绑定我的自定义函数，并在执行后启用所有以前的事件？

我正在构建一个bookmarklet，它应该适用于任何已经加载的页面，我使用jQuery来处理我的自定义逻辑（页面在加载后被jquerified）。请注意，我没有任何控制哪些事件和何时被绑定。

目前我找到的最好的稳定解决方案是取消绑定事件，通过自定义函数绑定阻止默认操作，然后重新加载页面。这有效，但我想避免重新加载。部分解决方法是重新加载页面并滚动到上一个位置（如何实现此效果？）。一些可能的解决方案会使用iframe，但我宁愿避免这种情况。

Answer 1

更容易将div元素放在所有......像

这样的东西

<强> CSS

.noclick {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999; /* or maybe higher */

    background-color: transparent;
}

<强>的jQuery

jQuery(document).ready(function() {
    jQuery('body').append('<div class="noclick" />');
});

Answer 2

我看到它完成的一种很好的方式，并且我自己完成的是使用模态'遮罩'叠加。

覆盖整个页面的灰色透明蒙版，除了您正在与之交互的元素，例如。模态弹出窗口。

另一种方法是使用jQuery BlockUI plugin。

Answer 3

您可以将onclick重新分配给另一个属性，然后覆盖它。

一个元素的示例

var btn = document.getElementById("button");
btn._onclick = btn.onclick;
btn.onclick = function(){ return false; };

当您想将其转回原始活动时

var btn = document.getElementById("button");
if (btn._onclick) {
    btn.onclick = btn._onclick;
    btn._onclick = null;
}

Answer 4

这取决于你的onclick事件是否依赖于被点击的元素（即是否需要知道点击了哪个元素）：

如果它是独立的，那么你只需要向body元素或其他父元素添加一个事件处理程序（因为首先调用父事件，然后调用子元素，这是你想要的）：

$('body').click(function() { /* your code here */});

它依赖于元素，然后你可以访问已被点击的元素的'click'属性中注册的先前onclick事件代码，所以这样的事情（可能更具体一点）选择者）：

$('body *').each(function() {
  var previousClick = this.click;
  this.click = null; // remove previous
  $(this).click(function() { /* your code here */});
  $(this).click(function() { previousClick();}); // run the code that was already there.
})

Answer 5

一些修改算法的答案。我们的想法是＆＃34;覆盖＆＃34;透明元素的链接。您可以使用伪元素（例如：after ）。

防止＆＃34; tab键＆＃34;设置tabindex：

<a href="..." tabindex="-1">

标记与班级的关联＆＃34;禁用＆＃34;点击：

$('a').on('click', function(){ $(this).addClass('disabled') })

添加css：

a.disabled:after { position: absolute; content: ""; display: block; background: white; opacity: 0.5; // optional z-index: 999; left: 0; top: 0; bottom: 0; right: 0; }

＆＃13;

$('a').on('click', function(){ $(this).addClass('disabled') });

＆＃13;

a.disabled:after {
    position: absolute;
    content: "";
    display: block;
    background: white;
    opacity: 0.5; // optional 
    z-index: 999;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a hreh="#" tabindex="-1">The Link</a>

＆＃13;

暂时禁用所有onclick事件并将其绑定回来

5 个答案: