點擊事件不能在平板電腦上工作

編輯：我已經減少了這個簡單的jQuery問題。如果我綁定點擊並對元素調用可拖動（無論這種情況發生的順序如何），則點擊事件不適用於我的平板電腦（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的一拳，然後拖着不再適用於平板電腦，但點擊事件確實有效。有誰知道我可以如何同時點擊和拖動？

謝謝！

大衛

來源

2014-05-08 David Conlisk

看起來可能與此有關的問題：https://github.com/furf/jquery-ui-touch-punch/issues/215 –

好了，所以基於user3153169的建議，嘗試V單擊，我用jQuery Mobile的解決這個問題。請注意，這並不能解決我現實世界中的問題（引入jquery mobile會導致它自己的問題），但它在這個簡單的實例中起作用。

這裏是工作的代碼：在Android平板

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

來源

2014-05-09 14:12:32

試試這個：

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

來源

2014-05-08 14:20:27 devqon

這不幸的是，解決方案有相同的問題。您先前的評論（現已刪除？）關於使用vclick作品，但需要jquery mobile，然後在我的真實世界場景中引發其他問題（涉及到angularjs和jsplumb）。 –

沒關係，沒想到vclick會這樣做。但是你可以嘗試綁定點擊和觸摸： '$（「＃test」）。bind（「click touchend」，function（）{// callback}））;' – devqon

我有同樣的問題與鉻（34）。從下面的鏈接中，我確實在我的網站上替換了jquery.ui.touch-punch.js。現在click事件又回來了可拖動的項目

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

來源

2014-05-15 17:10:34 user3472193

很高興它爲你工作，但它doesn'您可以按照您的建議在使用v0.2.3時使用上述代碼在平板電腦上工作。 –

點擊事件不能在平板電腦上工作

回答

相關問題