点击活动不适用于平板电脑

时间:2014-05-08 12:21:41

标签: jquery tablet

编辑:我已将此缩减为简单的jquery问题。如果我绑定了一个点击并且还在一个元素上调用draggable(不管这种情况发生了什么顺序),则点击事件在我的平板电脑上不起作用(Nexus 10上的Chrome)。这是一个演示:http://jsfiddle.net/FME24/

的小提琴手

以下是代码:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

    <div id="test" style="display:block;float:left;height:50px;width:50px;background-color: blue;"></div>

    <!-- jQuery and AngularJS from CDN with fallback -->
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
    <script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js'></script>
    <script>window.jQuery || document.write('<script src="lib/jquery/jquery-1.9.0.min.js"><\/script>')</script>
    <script>window.jQuery.ui || document.write('<script src="lib/jquery/jquery-ui-1.9.2.min.js"><\/script>') </script>
    <script src='lib/jquery/jquery.ui.touch-punch.min.js'></script>
    <script>


        $("#test").draggable();

        $("#test").bind("click", function () {
            alert("click!");
        });
    </script>
</body>
</html>

编辑:如果删除对jqueryui punch的引用,则平板电脑上的拖动不再有效,但click事件确实有效。有谁知道我如何同时点击并拖动?

谢谢!

大卫

3 个答案:

答案 0 :(得分:1)

我在Android平板电脑上遇到了与chrome(34)相同的问题。从下面链接我确实在我的网站上替换了jquery.ui.touch-punch.js。现在点击事件返回可拖动项目

patch (or update) for jquery.ui.touch-punch.js

答案 1 :(得分:0)

试试这个:

$("#test")
    .draggable()
    .click(function(){
        if ( $(this).is('.ui-draggable-dragging') ) {
            return;
        }
        // click action here
});

答案 2 :(得分:0)

好的,基于user3153169尝试vclick的建议,我使用jquery mobile来解决这个问题。请注意,这并不能解决我的实际问题(jquery mobile的引入导致了它自己的问题),但它确实在这个简单的实例中起作用。

以下是工作代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div id="test" style="display: block; float: left; height: 50px; width: 50px; background-color: blue;"></div>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js'></script>
<script>window.jQuery || document.write('<script src="lib/jquery/jquery-1.9.0.min.js"><\/script>')</script>
<script>window.jQuery.ui || document.write('<script src="lib/jquery/jquery-ui-1.9.2.min.js"><\/script>') </script>
<script src='lib/jquery/jquery.mobile-1.4.2.min.js'></script>
<script src='lib/jquery/jquery.ui.touch-punch.min.js'></script>
<script>
    $("#test").draggable();

    $("#test").bind('vclick', function () {
        alert("vclick!");
    });
</script>