移动快速点击-防止重影 [英] mobile fast click - prevent ghost focus

问题描述

我正在为移动浏览器进行快速点击.当我快速单击当前页面的链接时，它会将ajax加载到下一页.我的快速单击脚本可以立即停止幻影单击.但是，如果下一页上的输入元素位于当前页面的单击位置，则它仍会获得焦点并显示虚拟键盘.怎么也防止重影事件?

I'm doing fast click for mobile browser. When I fast click on link of current page, it does an ajax load to next page. My fast click script can stop the ghost click now. But if there is an input element on next page at click position on current page, it still get a focus and display virtual keyboard. How to prevent ghost focus event too?

推荐答案

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

To prevent actions related to an event, use .stopImmediatePropagation() and preventDefault().

工作演示

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

• stopImmediatePropagation() - Handlers within the same function where it is call, will be executed normally, but will immediately neglect/stop any actions within other functions related to the same event. For example:

// 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()-调用时，默认操作将被忽略.例如

• preventDefault() - When called, default action will be neglected. For example

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

该链接将被暂停，但将触发警报

The link will be halted, but an alert will fire

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

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

Both should be combined together in order to stop events from bubbling up the DOM tree.

我制作了 演示 来解释两者之间的区别以及为什么两者都应该组合在一起

I made a Demo to explain the differences between both and why both should be combined together.

基于上述内容，您的代码应如下所示.

Based on the above, your code should look like this.

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

我希望这会有所帮助.

这篇关于移动快速点击-防止重影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！