Question

通过javascript暂时禁用所有鼠标点击/拖动等事件的最简单方法是什么？

我以为我可以做document.onclick = function() { return false; }; ...等等，但那不起作用。

Answer 1

如果目标是禁用点击整个页面，那么你可以做这样的事情

document.addEventListener("click",handler,true);

function handler(e){
    e.stopPropagation();
    e.preventDefault();
}

addEventListener中的true参数将确保在事件捕获阶段执行处理程序，即首先在文档上捕获任何元素的单击，并且在侦听器之前首先执行文档的click事件的侦听器以获取任何其他元素。这里的技巧是阻止事件进一步传播到下面的元素，从而结束调度过程，以确保事件不会到达目标。

此外，您需要显式停止与事件目标元素关联的默认行为，因为在调度过程完成后默认情况下它们将被执行，即使事件已停止从上方进一步传播

可以进一步修改以有选择地使用。

function handler(e){
if(e.target.className=="class_name"){
e.stopPropagation();
e.preventDefault();
}

以这种方式修改的

处理程序将仅禁用具有类“class_name”的元素的单击。

function handler(e){
    if(e.target.className!=="class_name")
    e.stopPropagation()
}

这将仅启用具有类“class_name”的元素的单击。希望这有助于：）

Answer 2

如果你想要绝对没有任何可拖动/可点击的东西，禁止在输入字段等中键入，我会考虑在整个页面上显示一个绝对定位的透明div，这样每次点击都会在div上，这将不起作用。这将为您提供快速和整洁的开启和关闭此点击禁用程序，而无需注册大量的听众

Answer 3

如何进行变量更改并动态禁用所有鼠标点击？

var freezeClic = false; // just modify that variable to disable clics !

document.addEventListener("click", freezeClicFn, true);

function freezeClicFn(e) {
    if (freezeClic) {
        e.stopPropagation();
        e.preventDefault();
    }
}

我喜欢它，因为它不是解除绑定......等等，这可能只是禁用clic几秒钟的开销。

替代jQuery和CSS

由于用户的视觉反馈，我非常喜欢另一个：

// this one will add or remove dynamically the class loading on the body
const loading = load => load ? $('body').addClass('loading') : $('body').removeClass('loading');

在CSS中你可以像这样设计样式：

.loading {
    cursor: wait; /*busy cursor*/
}

.loading * {
    /*this will disable all events caputred by javascript*/
    pointer-events: none; 
}

然后你只需要这样做：

loading(true); // load mode ON
await myAsyncFunction() // can be an ajax call or whatever
loading(false); // load mode OFF

Answer 4

window.addEventListener("click", (e) => {
  e.stopPropagation();
  e.stopImmediatePropagation();
  e.preventDefault();
}, true)

如果我们将侦听器添加到文档而不是 window ，则任何人都可以将侦听器添加到 window ，这样就可以了。由于 window 的 document 子级，其事件总是在 window 事件之后触发。

我们使用Event对象的3种方法。

stopPropagation用于阻止所有捕获和冒泡

stopImmediatePropagation用于阻止相同的侦听器（例如，另一个窗口单击侦听器）

preventDefault用于阻止所有用户代理事件（例如，锚href或表单提交）

Answer 5

如果已执行onclick = null，则如何撤销onclick事件以正常运行..或

<a href="www.somesite.com" onclick="return yourFunction(this)">Link text</a>

<script type="text/javascript">
function yourFunction(anchor)
{ if(anchor.disabled) return;
/* Your function here */
}
</script>

Answer 6

这篇文章可能会有用：

http://www.computerhowtoguy.com/how-to-use-the-jquery-unbind-method-on-all-child-elements/

特别是一部分是一个删除所有点击事件的递归函数。请记住，如果使用jQuery创建click事件，jQuery将删除click事件。本文中给出的函数将删除使用jQuery创建的函数和不使用jQuery创建的函数。给出的函数是：

function RecursiveUnbind($jElement) {
    // remove this element's and all of its children's click events
    $jElement.unbind();
    $jElement.removeAttr('onclick');
    $jElement.children().each(function () {
        RecursiveUnbind($(this));
    });
}

您可以像这样调用函数：

RecursiveUnbind($('#container'));

该函数接受一个jQuery对象参数，但您可以轻松地将其更改为传递字符串作为元素ID的名称，或者您认为最好。

Answer 7

为防止事件的默认行为，请在事件处理程序中使用event.stopPropagation()和event.preventDefault()。另外请记住，return false;是另一种指示您要取消默认操作的方法...

Event属性returnValue指示是否已阻止此事件的默认操作。默认情况下将其设置为true，以允许执行默认操作。将此属性设置为false会阻止默认操作。（来源：MDN Web Docs: Event.returnValue。）

通常，当任何函数具有任何有意义或有用的用途时，我们都会从该函数返回值-return false取消事件是有意义的，因为它指示失败的事件，并且由于事件处理程序使用它而有用

要获得最大的跨浏览器兼容性，请记住return false; ...

document.addEventListener("click",handler,true);

function handler(e){
    e.stopPropagation();
    e.preventDefault();
    return false;
}

禁用页面上的所有点击事件（javascript）

7 个答案:

替代jQuery和CSS