javascript - jQuery 暂时禁用点击

Question

我的网站有很多元素在点击时触发 ajax 数据检索，还有一些由 jquery ui 处理的拖放元素。许多元素使用自己的点击事件，直接附加到他们身上。我需要一些功能，可以在某些预定义的情况下暂时忽略所有鼠标点击/mouseup/mousedown 事件。例如，我想完全禁用拖放，直到某些 ajax 请求正在进行中，等等。我想我会在单击和 preventDefault() 上绑定(bind)，我尝试像这样在文档上绑定(bind)，但它似乎没有工作:

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

我认为这是因为当事件到达 $(document) 时，它已经在所有子项上触发，所以 preventDefault() 为时已晚。

我能想到的一个解决方案是设置一些全局变量，比如 ignore_clicks=true；然后添加到处理鼠标单击的每个函数中，检查此变量是否为真。这似乎非常困难，而且由于 jquery-ui 代码中的外部点击处理程序，我担心甚至不可能。

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

是否有任何简单而优雅的解决方案可以让我暂时阻止给定页面上的所有鼠标点击？ (也是 mouseup 和 mousedown)。

Answer 1

一种解决方案是使用 addEventListener 在捕获阶段停止事件:

document.addEventListener("mousedown", function(e) {
    e.preventDefault();
    e.stopPropagation();
}, true /* true == capturing phase */);

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