0

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

我正在构建一个书签，它应该适用于任何已经加载的页面，并且我正在使用 jQuery 来处理我的自定义逻辑（页面在加载后会被查询）。请注意，我无法控制绑定哪些事件以及何时绑定。

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

4

5 回答 5

6

放置一个 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" />');
});
于 2012-12-27T14:53:55.937 回答
2

我已经看到它完成并自己完成的一个好方法是使用模态“掩码”覆盖。

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

另一种方法是使用jQuery BlockUI 插件。

于 2012-12-27T14:55:59.667 回答
1

您可以将 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;
}
于 2012-12-27T15:05:15.087 回答
0

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

如果它是独立的，那么您可以将事件处理程序添加到 body 元素或其他父元素（因为首先调用父事件，然后是子事件，这就是您想要的）：

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

它取决于元素，然后您可以访问已在正在单击的元素的“单击”属性中注册的上一个 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.
})
于 2012-12-27T15:57:30.500 回答
0

一些修改算法的答案。这个想法是用透明元素“覆盖”链接。您可以使用伪元素（例如:after）。

为了防止“tab键”设置tabindex：

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

单击时将链接标记为“已禁用”：

$('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; } 

$('a').on('click', function(){ $(this).addClass('disabled') });
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;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a hreh="#" tabindex="-1">The Link</a>

于 2016-05-07T06:28:09.923 回答