在页面上禁用所有点击事件（JavaScript）

Question

如何通过JavaScript最简单地暂时禁用所有鼠标点击/拖动等事件？

我认为可以使用document.onclick = function() { return false; }; 等方式，但这并没有起作用。

- fearofawhackplanet

---

你的方法应该可以行得通。我使用 Firebug 控制台在此页面上执行了它，而且它也起作用了。 - Antony Carthy

Mozilla和IE的事件顺序不同，对吧？我认为我的方法无效是因为在IE中，被点击的元素会在文档之前处理事件？ - fearofawhackplanet

请标记一个获胜的答案。谢谢！ - NoWar

Answer 1

如果目标是禁用整个页面的点击，则可以像这样做

document.addEventListener("click", handler, true);
    
function handler(e) {
  e.stopPropagation();
  e.preventDefault();
}

使用 addEventListener 的 true 参数可以确保在事件捕获阶段执行处理程序，即任何元素的点击都将首先在文档上进行捕获，并且文档的点击事件的侦听器会先于任何其他元素的侦听器被执行。这里的技巧是停止事件进一步传播到以下元素，从而结束分派过程，以确保事件未到达目标。

此外，您需要明确停止与事件目标元素关联的默认行为，因为它们将在分派过程完成后默认执行，即使事件已经被以上方阻止进一步传播。

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

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"类的元素才能被点击。

希望这有所帮助 :)

- Sid

---

你如何移除点击监听器，以便再次启用点击？ - Ravi Sankar Rao

@RaviSankarRao 当你想要再次启用点击时，只需调用 document.removeEventListener('click', handler) 即可 :) - peernohell

由于这个答案被禁止点击，我无法进行点赞，因为这个原因 :) - vir us

“click”事件对我不起作用，但“mousedown”可以。 - pmiguelpinto

在暂停所有旧事件后，我如何绑定一些新事件？ - ming

Answer 2

动态禁用页面上的所有点击事件

let freezeClic = false; // just modify that variable to disable all clics events

document.addEventListener("click", e => {
    if (freezeClic) {
        e.stopPropagation();
        e.preventDefault();
    }
}, true);

我经常在加载时使用它，或者为了避免用户意外地双击动作按钮。简单且性能友好 :)

请查看这个工作示例

另一种CSS方式

另一个我非常喜欢的原因是用户有视觉反馈:

/* style.css */
.loading {
    cursor: wait; /* busy cursor feedback */
}

.loading * {
    /* disable all mouse events on children elements */
    pointer-events: none; 
}

一个简单的示例，动态添加 .loading 类：

const elm = document.getElementById('myElm')

elm.classList.add('loading')
myAsyncFunction().then(() => elm.classList.remove('loading'))

- TOPKAT

Answer 3

如果您想完全禁止拖放/单击、禁用输入字段等，我建议在整个页面上显示一个绝对定位的透明 div，使每次单击都会落在这个 div 上，而这个 div 什么也不做。这样可以轻松快捷地打开和关闭此点击禁用器，而不需要注册大量监听器。

- David Hedlund

---

我认为IE（至少是7）不能正确地在完全透明的元素上触发事件。我通过使用低不透明度的白色div使其正常工作，但我希望有更好的方法。 - fearofawhackplanet

Answer 4

获胜答案效果良好，但如果您传递了捕获 true 布尔值，在您想要移除监听器的时候，必须传递完全相同的值。否则，监听器的移除将无法正常工作。

示例：

添加监听器

document.addEventListener('click', DisableClickOnPage.handler, true);

移除监听器

document.removeEventListener('click', DisableClickOnPage.handler, true);

文档: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

- leocavia

---

已在 Chrome 上确认 - besthost

Answer 5

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

如果我们将监听器添加到 document 而不是 window，那么任何人都可以向 window 添加监听器并使其起作用。这是因为 document 是 window 的子级，它的事件总是在 window 事件之后触发。

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

stopPropagation 阻止事件捕获和冒泡。

stopImmediatePropagation 阻止相同的监听器(例如另一个窗口点击监听器)。

preventDefault 防止所有用户代理事件 (例如anchor href 或 form submit)。

- Erdogan Oksuz

Answer 6

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

事件属性 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;
}

- HoldOffHunger

Answer 7

这篇文章可能会有用：

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

特别地，其中一个部分是递归函数，用于删除所有点击事件。请记住，如果使用jQuery创建了点击事件，则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的名称，或者您认为最好的方式。

- Lucavai

Answer 8

如果已经执行了 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>

- Sajad Bahmani