Javascript jQuery暂时禁用单击

我的网站有很多元素，这些元素在点击时触发ajax数据检索，还有一些由jQueryUI处理的拖放元素。许多元素使用它们自己的直接附加到它们的单击事件。我需要一些功能，可以在某些预定义的情况下暂时忽略所有鼠标单击/mouseup/mousedown事件。例如，我想在某个ajax请求进行之前完全禁用拖放功能，等等。我想在单击时绑定preventDefault（），我尝试在文档上绑定，如下所示，但似乎不起作用：

$(document).on("mousedown", "*", null, function(ev){ev.preventDefault();});

我认为这是因为当事件达到$（document）时，它已经在所有孩子身上触发，所以现在阻止default（）已经太晚了

我可以想象的一个解决方案是设置一些全局变量，比如ignore\u clicks=true；然后添加到每个处理鼠标单击的函数中，检查此变量是否为真。这似乎非常困难，而且由于jQueryUI代码中的外部单击处理程序，恐怕甚至不可能实现

我想象的另一个解决方案是在当前页面上临时放置一些固定样式的元素，100%宽度和100%高度，不透明度为零，但这似乎不是一个理想的解决方案，感觉更像是一个黑客。此外，如果网页上有任何正在进行的动画，而该动画被透明元素覆盖，则动画的性能会降低

---

有没有简单而优雅的解决方案可以让我暂时阻止所有鼠标点击给定页面？（也有mouseup和mousedown）。

使用jquery可以打开/关闭事件处理程序：

function doClick(e) {
    e.preventDefault(); //Prevent default event.
    //do some fancy ajax stuf...
};

//Toggle on:
$(document).on('click', '.clickable', doClick);

//Toggle off:
$(document).off('click', '.clickable', doClick);

这将适用于任何事件，如单击/mousedown/mouseup等

如果要防止触发所有其他事件，可以尝试以下操作：

function preventPropagation(e) {
    e.stopImmediatePropagation();
};

//Toggle on when ajax:
$(document).on('click mousedown mouseup', '*', preventPropagation);

//Toggle off when ajax finishes:
$(document).off('click mousedown mouseup', '*', preventPropagation);

---

一种解决方案是使用以下方法在捕获阶段停止事件：

请注意，这在IE8中不起作用。

我不认为有一个“处理”动画覆盖是一种黑客行为，对我来说它看起来相当优雅。很多应用程序使用它是因为它能给用户反馈。他们知道应用程序正在工作，他们必须等待。

如果您想阻止所有基于鼠标的交互，可以在dom前面放置一个不可见的覆盖，例如

HTML

<div id="click-blocker" style="display: none;"></div>

JS

#click-blocker {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

// to disable clicks:
$('#click-blocker').show()

// to enable clicks again
$('#click-blocker').hide()

通过

show

ing

点击拦截器

，所有点击都会发生在拦截器上，因为它位于所有内容的前面，但由于它没有内容或背景，用户会感觉到它，因为他们的点击没有做任何事情

---

如果您只想禁用特定类型的交互，例如您提到的拖放操作，这将不起作用。

因此您建议我暂时关闭页面上所有元素上的所有单击事件，然后在ajax完成后使用重新附加它们。

？这是不可能做到的，许多元素都有自己的onclick处理程序，这些处理程序是由jqueryui设置的，我对此没有控制权。你是对的。检查我的编辑。我想我第一次读错了你的问题。再次使用.off（）和.on（）。你检查过库了吗？因为你想在处理这些AJAX事件时阻止几乎所有与页面的交互，你可能想在页面上放置一个全屏模式，显示加载微调器。然而，我通常会警告你不要使用这种模式，或者你正在做的事情。当请求完成时，让整个页面变得无响应是一种糟糕的用户体验。答案是糟糕的，正确的方法是使用

指针事件

CSS属性，该属性实际上会忽略单击（而不是删除以前导致表单提交的

prefaultdefault

ed的处理程序）。设置指针事件可以很好地解决这个问题。浏览器对

指针事件的支持似乎比捕获侦听器的支持更差，因此我将保持该答案处于选中状态。这完全符合预期，因为它可以在点击到达元素之前捕获点击。出于我的目的，我需要分别在这三个面板上添加侦听器（单击、mousedown、mouseup），然后它就可以工作了。谢谢！如果网页上有任何正在进行的动画，则会降低性能。
// to disable clicks:
$('#click-blocker').show()

// to enable clicks again
$('#click-blocker').hide()