jQuery 移动点击事件触发两次 [英] jQuery mobile tap event triggered for twice

查看：27 发布时间：2021/12/27 19:11:47 jquery jquery-mobile

本文介绍了jQuery 移动点击事件触发两次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 jquery mobile 'tap' 事件进行了测试，发现每次触发它都会两次.html页面的代码如下:

<头><title>演示</title><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script><风格>#盒子{背景颜色:红色；宽度:200px；高度:200px；}</风格><身体><div id="盒子">轻拍我

<script type="text/javascript">$(document).ready(function() {$('#box').bind('tap',function(event) {警报('为什么')；});});

更讽刺的是，当我在 jsfiddle 上测试时，它只触发了事件一次.

这是链接.http://jsfiddle.net/mochatony/tzQ6D/6/

经过进一步测试后，我发现将 javascript 放在标题部分后，该错误已消失.

<头><title>演示</title><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"><script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"><style type="text/css">#box{ 背景颜色:红色；宽度:200px；高度:200px；}</风格><script type="text/javascript">$(document).ready(function() {$('#box').bind('tap', function(event) {警报('晕')；});});<身体><div id="盒子">轻拍我

我无法解释为什么正文和标题部分的位置会有所不同.

解决方案

我忘了我在哪里看到的，但问题是 jQuery Mobile 绑定到触摸和鼠标事件以模拟点击"，并且在某些情况下Android 会同时触发这两种情况.

对我有用的技巧是在事件处理程序中对事件调用 preventDefault.这将防止重复事件触发.

至于为什么只是有时会出现这种情况，我知道移动浏览器会尝试仅在有人不收听触摸版本时才触发事件的鼠标版本.检测或 jQuery 的委托可能存在问题，使启发式方法变得混乱.

I tested with jquery mobile 'tap' event and found it fired two times, everytime it is triggered. Code as below for a html page:

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>    
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>      
    <style>
        #box{
            background-color:red;
            width:200px;
            height:200px;
        }   
    </style>
</head>
<body>
    <div id="box">
        tapped me
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#box').bind('tap',function(event) {
                alert('why');
            }); 
        });
    </script>
</body>
</html>

More irony is when I test this over jsfiddle, it only fired the event for one time.

Here's the link. http://jsfiddle.net/mochatony/tzQ6D/6/

After further testing I found out the bug has gone away with placing the javascript at header section.

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js">
    </script>
    <style type="text/css">
        #box{ background-color:red; width:200px; height:200px; }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#box').bind('tap', function(event) {
                alert('halo');
            });
        });
    </script>        
</head>
<body>
    <div id="box">
        tapped me
    </div>
</body>
</html>

I couldn't explained why the placement at the body and header section make this different.

解决方案

I forget where I saw this, but the issue is that jQuery Mobile is binding to both touch and mouse events in order to simulate "tap," and in some circumstances Android will fire both.

The trick that has worked for me is to call preventDefault on the event in your event handler. That will keep the duplicate event from firing.

As far as why this is the case only sometimes, I know that mobile browsers will try to only fire the mouse version of the event if someone isn't listening to the touch version. There may be an issue with detection or jQuery's delegation that is confusing that heuristic.

这篇关于jQuery 移动点击事件触发两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

jQuery 移动点击事件触发两次 [英] jQuery mobile tap event triggered for twice

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

jQuery 移动点击事件触发两次 [英] jQuery mobile tap event triggered for twice

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭