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

问题描述

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

解决方案

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

工作演示

<块引用>

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

//警报会触发$(document).on('click', '#foo', function(event) {event.stopImmediatePropagation();alert('你好世界');});//但是这将被停止$(document).on('click', '#foo', function(event) {console.log('我被拦住了！');});

<小时><块引用>

• preventDefault() - 调用时，默认操作将被忽略.例如

<a href="http://www.google.com" id="foo">谷歌一下！</a>

链接将停止，但会触发警报

$(document).on('click', '#foo', function(event) {event.preventDefault();alert('我更喜欢MSN');});

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

我做了一个演示来解释两者之间的差异以及为什么两者应该结合在一起.

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

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

我希望这会有所帮助.

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?

解决方案

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

Working Demo

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

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

I hope this helps.

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