移动快速点击 - 防止幽灵焦点

Question

我正在快速点击移动浏览器.当我快速点击当前页面的链接时,它会对下一页执行ajax加载.我的快速点击脚本可以立即停止鬼点击.但是如果当前页面上的点击位置的下一页上有输入元素,它仍然会获得焦点并显示虚拟键盘.如何防止鬼焦事件呢？

Answer 1

要阻止与事件相关的操作,请使用.stopImmediatePropagation()和preventDefault().

工作演示

• stopImmediatePropagation() - 调用它的同一函数内的处理程序将正常执行,但会立即忽略/停止与同一事件相关的其他函数内的任何操作.例如:

// alert will fire
$(document).on('click', '#foo', function(event) {
 event.stopImmediatePropagation();
 alert('Hello world');
});

// but this will be stopped
$(document).on('click', '#foo', function(event) {
 console.log('I am stopped!');
});

• preventDefault() - 调用时,默认操作将被忽略.例如

<a href="http://www.google.com" id="foo">Google it!</a>

该链接将被暂停,但会发出警报

$(document).on('click', '#foo', function(event) {
 event.preventDefault();
 alert('I prefer MSN');
});

两者应该组合在一起,以阻止事件冒泡DOM树.

我做了一个演示来解释两者之间的差异以及为什么两者应该结合在一起.

基于以上所述,您的代码应该如下所示.

$(document).on('click', '.selector', function (event) {
 event.stopImmediatePropagation();
 event.preventDefault();
});

我希望这有帮助.

Answer 2

我已经为此苦苦挣扎了一段时间，但只找到了部分解决方案。尽管我认为这足以解决我的问题。希望它对其他人也有帮助。

该解决方案基于 jQuery mobile，但如果您不使用它，您也许可以执行类似的操作。

我所做的是，我在其他元素之上放置一个填充整个屏幕的空 div，以便它阻止（大多数）点击/触摸事件。

<div id="ghostBuster" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:none;"></div>

我在隐藏要更改的页面之前显示它。

$("div[data-role='page']").on("pagebeforehide", function() {
     $("#ghostBuster").show();
});

显示下一页后再次隐藏它。

$("div[data-role='page']").on("pageshow", function() {
    $("#ghostBuster").hide();
});

我还没有非常彻底地测试过它，并且只在我的 Android 设备上进行过测试，但到目前为止，它似乎可以避免幽灵点击和聚焦。它无法避免幽灵点击选择框。当页面之间的过渡动​​画非常快时它不起作用。我通过切换到 jQuery mobile 提供的非本机替代方案解决了选择框的问题。

您可能会考虑在 mouseup 上再次隐藏 div，但这在我的情况下不起作用，因为我使用滑动来更改页面。

这可能不是最漂亮的解决方案，但到目前为止我还无法找到或想出更好的解决方案。