Question

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

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

我认为这是因为当事件达到$（文件）时，它已经被所有孩子触发，所以要防止默认（）为时已晚。

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

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

是否有任何简单而优雅的解决方案可以让我暂时阻止给定页面上的所有鼠标点击？（mouseup＆amp; mousedown也是如此。）

Answer 1

一种解决方案是使用addEventListener

在捕获阶段停止事件

import shapeless._

case class Create(userName: String, firstName: String, lastName: String)
case class Created(userName: String, firstName: String, lastName: String)
case class SortOfCreated(screenName: String, firstName: String, lastName: String)

val c = Create("username", "firstname", "lastname")

val createGen = LabelledGeneric[Create]
val createdGen = LabelledGeneric[Created]
val sortOfCreatedGen = LabelledGeneric[SortOfCreated]

val created: Created = createdGen.from(createGen.to(c))

sortOfCreatedGen.from(createGen.to(c)) // fails to compile

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

Answer 2

使用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);

这适用于任何事件，例如click / 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);

Answer 3

我不认为有＆＃34;处理＆＃34;动画叠加是一个黑客，它对我来说似乎很优雅。很多应用程序都使用它，因为它可以为用户提供反馈。他们知道应用程序正在运行，他们必须等待。

Answer 4

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

<强> HTML

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

<强> CSS

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

<强> JS

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

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

通过show click-blocker，所有点击都会发生在拦截器上，因为它位于所有内容之前，但由于它没有内容或背景，因此用户会感知到因为他们的点击没有做任何事情。

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

jQuery暂时禁用了点击次数

4 个答案: