9

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

4

3 回答 3

10

要防止与事件相关的操作，请使用.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!');
});

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

我希望这有帮助。

于 2013-04-11T13:36:14.637 回答
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 是最低的，没有意义超过这个

于 2014-05-09T04:55:01.717 回答
-1

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

此解决方案基于 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，但这在我的情况下不起作用，因为我使用滑动来更改页面。

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

于 2012-12-10T22:39:10.997 回答