Question

我在解雇时遇到vclick（或点击）事件的问题。

这是我的HTML代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Document</title>    
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">   
    <link rel="stylesheet" href="css/estilo.css">
    <script src="js/cordova-2.6.0.js"></script>
    <script src="js/jquery-2.0.0.js"></script> 
    <script src="js/functions.js"></script> 
    <script src="js/jquery.mobile-1.3.1.js"></script>

    </head>
    <body>
        <div data-role="page" id="page">
           <div data-role="header" position="fixed">
            <h1>Data</h1>
           </div>
           <div data-role="content">    
                   <div id="btn_comentar">
                   <a href="#page4"></a>
                   </div>
              </div>
        </div>
     </body>
     </html>

这是我的functions.js

$(document ).bind("mobileinit", function(){

   $(document).bind("pageinit",function(){

       $("#btn_comentar").bind("vclick",function(e){

            console.log(e.isDefaultPrevented());
            console.log(e.result);
            console.log(e.relatedTarget);
            alert("buttooon");

              list_comments();

          });

   });

}

当我点击我的#btn_comentar时，我想要从函数list_comments（通过ajax发送）中检索的数据是重复的;我意识到它发送了两次，最后我点击了我的按钮。

这是控制台的输出（两次）：假未定义空

以及警告信息框（两次）“buttoon”;

我尝试了一些解决方案，如：

jQuery Mobile : replace click event by vclick event

但没有成功，请需要一些帮助

这是我的新代码及其现在的工作方式，但似乎没有jQuery Mobile的默认配置

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Document</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
    <link rel="stylesheet" href="css/estilo.css">
    <script src="js/cordova-2.6.0.js"></script>
    <script src="js/jquery-2.0.0.js"></script>
    <script src="js/custom-mobile.js"></script> 
    <script src="js/jquery.mobile-1.3.1.js"></script>
    <script src="js/functions.js"></script>

        </head>
        <body>
            <div data-role="page" id="page">
               <div data-role="header" position="fixed">
                <h1>Data</h1>
               </div>
               <div data-role="content">    
                       <div id="btn_comentar">
                       <a href="#page4"></a>
                       </div>
                  </div>
            </div>
         </body>
         </html>

定制mobile.js

 $(document ).bind("mobileinit", function(){
       //$.mobile.allowCrossDomainPages = true;  

      });

functions.js

$(document).on("ready",function(){
    $("#btn_comentar").bind("vclick",function(){
                  list_comments();
              });
 });

Answer 1

According to docs，

这些增强功能基于jQuery Mobile的默认配置应用，该配置旨在用于常见方案，但可能符合您的特定需求，也可能不符合您的特定需求。幸运的是，使用mobileinit事件可以轻松配置这些设置。

这就是您需要使用mobileinit的内容。用于设置如下默认值：

$(document).bind('mobileinit', function(){
        $.mobile.defaultTransition = 'slideup';
});

如果我的理解是正确的，那么在包含jQuery Mobile的js之前包含/触发mobileinit。假设您这样做了，您的脚本顺序必须如下所示：

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script> <!-- This script must have mobileinit -->
<script src="jquery-mobile.js"></script>

此时（加载custom-scripting.js时），pageinit将无法定义。最好添加pageinit事件 AFTER jQM脚本。

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script> <!-- This script must have mobileinit -->
<script src="jquery-mobile.js"></script>
<script>
  $(document).bind("pageinit", function(){
    $(document).bind("vclick", "#btn_comentar" ,function(e){
        console.log(e.isDefaultPrevented());
        console.log(e.result);
        console.log(e.relatedTarget);
        alert("buttooon");
        list_comments();
      });
   });
 </script>

Answer 2

在pageinit上使用一次：

$(document).on('pageinit') { 
$("#btn_comentar").on("vclick",function(e){

        console.log(e.isDefaultPrevented());
        console.log(e.result);
        console.log(e.relatedTarget);
        alert("buttooon");

          list_comments();

      });
}

这应该有效

Answer 3

我遇到的双击的另一个原因是由于Chromium除了鼠标事件之外还合成了两个触摸事件。我通过在桌面Chrome的开发人员“设备模式”（鼠标光标变为圆圈）中运行应用程序来确认此原因，确认问题存在，然后切换到设备模式，并确认问题已“修复”。

jblas discusses it，部分摘录：

请注意，vclick不会抑制浏览器生成的合成鼠标/单击事件，因为它不知道它正在使用的上下文，并且表单输入元素需要鼠标/单击事件才能正常运行。

如果您使用操纵杆或鼠标（桌面），则会在正常的鼠标点击事件中触发警报。

如果要在使用触摸时禁止单击事件，则必须在vclick处理程序中调用event.preventDefault（）。这会将请求排队以杀死随后的click事件，但由于设备供应商实现事件的方式不同，以及不同Android OS版本中的一些错误，这很难做到。我们尝试了几种方法来确定是否要杀死点击事件......一个是基于触发事件被触发的元素，另一个是触摸事件的位置。这是必要的，因为浏览器不一定将鼠标事件分派给它用于触摸事件的相同元素。

jQuery Mobile vclick被解雇了两次

3 个答案: