Click event not working on tablets

StackOverflow https://stackoverflow.com/questions/23541645

  •  18-07-2023
  •  | 
  •  

Question

EDIT: I've reduced this down to a simple jquery issue. If I bind a click and also call draggable on an element (doesn't matter in which order this happens), the click event does not work on my tablet (Chrome on Nexus 10). Here is a fiddler to demonstrate: http://jsfiddle.net/FME24/

And here is the code:

<!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>

EDIT: If I remove the reference to jqueryui punch, then dragging no longer works on the tablet, but the click event does work. Does anyone know how I can have both click and drag?

Thanks!

David

Was it helpful?

Solution 3

Okay, so based on user3153169's suggestion to try vclick, I used jquery mobile to fix this issue. Note that this doesn't solve my real-world problem (the introduction of jquery mobile causes issues of its own), but it does work in this simple instance.

Here is the working code:

<!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>

OTHER TIPS

I had same issue with chrome (34) at android tablet. From below link I did get replacement for jquery.ui.touch-punch.js in my site. Now the click event is back with draggable item

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

Try this:

$("#test")
    .draggable()
    .click(function(){
        if ( $(this).is('.ui-draggable-dragging') ) {
            return;
        }
        // click action here
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top