Jquery 移动快速点击-防止重影焦点_Jquery_Mobile

Jquery 移动快速点击-防止重影焦点

jquery mobile

Jquery 移动快速点击-防止重影焦点,jquery,mobile,Jquery,Mobile,我正在做手机浏览器的快速点击。当我快速点击当前页面的链接时，它会将ajax加载到下一个页面。我的快速点击脚本现在可以停止鬼点击了。但若在当前页面的点击位置有下一页上的输入元素，它仍然会获得焦点并显示虚拟键盘。如何防止重影聚焦事件呢？我已经为此绞尽脑汁了一段时间，但只找到了部分解决方案。尽管我认为这对解决我的问题已经足够了。希望它也能对其他人有所帮助这个解决方案是基于jquerymobile的，但是如果不使用jquerymobile，您也可以做类似的事情我要做的是，我将一个空div放在其他元素

我正在做手机浏览器的快速点击。当我快速点击当前页面的链接时，它会将ajax加载到下一个页面。我的快速点击脚本现在可以停止鬼点击了。但若在当前页面的点击位置有下一页上的输入元素，它仍然会获得焦点并显示虚拟键盘。如何防止重影聚焦事件呢？

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

这个解决方案是基于jquerymobile的，但是如果不使用jquerymobile，您也可以做类似的事情

我要做的是，我将一个空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("pageshow", function() {
    $("#ghostBuster").hide();
});

我还没有完全测试过它，而且只在我的android设备上测试过，但到目前为止，它似乎可以避免幽灵点击和聚焦。它无法避免重影单击选择框。当页面之间的过渡动画非常快时，它就不起作用了。我已经通过切换到jquerymobile提供的非本机选项解决了选择框的问题

你可以考虑在DousUp上隐藏div，但在我使用SpIPS来更改页面时，这不起作用。

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

要防止与事件相关的操作，请使用

.stopImmediatePropagation（）

和

preventDefault（）

-被调用的同一函数中的处理程序将正常执行，但会立即忽略/停止与同一事件相关的其他函数中的任何操作。例如：

-调用时，默认操作将被忽略。比如说

两者应该结合在一起，以防止事件在DOM树中冒泡

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

基于以上内容，您的代码应该如下所示

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

我希望这有帮助。

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

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

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

全球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是最小值，没有比这更多的意义了

这与你的点击处理程序无关，你正在加载的页面正在将其焦点设置为输入，你必须删除该页面上的脚本。感谢你的评论，这非常有用，赏金是你的朋友。@JoaoFerreira谢谢。我很高兴我能帮上忙：）这对“单击”操作有效，但当我尝试使用“touchstart”或“touchend”时，它不起作用。使用上述代码的“单击”操作在您单击按钮时会产生大约300毫秒的延迟，这会使应用程序感觉很慢。@willdanceforfun try

.on（“touchstart touchend”，函数

组合在一起。@Omar实际上我没有同时尝试过这两种方法，但现在我已经尝试过了，不幸的是，它仍然不起作用。我再次尝试“单击”后，它就起作用了。停止即时复制和防止默认操作对触摸操作有效吗？我希望这会起作用，但在我的Android 4.3.1手机上它不起作用。

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

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