移动快速点击 - 防止鬼焦点

Question

我正在为移动浏览器进行快速点击。当我快速单击当前页面的链接时，它会将 ajax 加载到下一页。我的快速点击脚本现在可以停止幽灵点击。但是如果当前页面的点击位置有下一页的输入元素，它仍然会获得焦点并显示虚拟键盘。如何防止鬼焦点事件呢？

Answer 1

要防止与事件相关的操作，请使用.stopImmediatePropagation() 和preventDefault()。

Working Demo

• 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 树中冒泡。

我做了一个Demo 来解释两者之间的区别以及为什么两者应该结合在一起。

根据以上内容，您的代码应如下所示。

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

我希望这会有所帮助。

Answer 2

我正在使用 fastclick.js。这是我防止在下一页自动触发的方法：

全局 CSS：

#preventClick { width:100%; height:100%; position:absolute; z-index:1000; top:0; left:0; }

下一页的HTML：

<body>
    <div id="preventClick"></div>
    <!-- button on the same coordinate with previous page -->
</body>

下一页的脚本：

function onDeviceReady() {
    setTimeout(function(){ $('#preventClick').hide(); }, 300);
}

300 是最小值，超过这个值没有意义

Answer 3

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

此解决方案基于 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();
});

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

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

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