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树。

我做了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();
});

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

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

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

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

3 个答案: