1

我在触发时遇到了 vclick（或 click）事件的问题。

这是我的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 发送）中检索的数据被复制；我意识到它发送了两次，最后是当我点击我的按钮时。

这是控制台的输出（两次）： false undefined null

还有警报消息框（两次）“按钮”；

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

jQuery Mobile：用 vclick 事件替换点击事件

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

这是我的新代码以及它现在的工作方式，但似乎没有 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>

custom-mobile.js

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

      });

函数.js

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

3 回答 3

2

根据文档，

这些增强功能是基于 jQuery Mobile 的默认配置应用的，该配置旨在处理常见场景，但可能会或可能不会满足您的特定需求。幸运的是，这些设置很容易使用mobileinit事件进行配置。

所以这就是你需要使用mobileinit的。对于像这样设置默认值：

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

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

<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不会被定义。明智的做法是在 jQM 脚本之后添加您的事件pageinit。

<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>
于 2013-07-10T07:14:25.153 回答
1

在 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();

      });
}

这应该工作

于 2013-07-09T22:59:07.323 回答
1

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

jblas 讨论它，部分摘录：

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

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

如果你想在使用触摸时抑制点击事件，你必须在你的 vclick 处理程序中调用 event.preventDefault() 。这将使请求排队以终止随后的点击事件，但由于设备供应商实现其事件的方式不同，以及不同 Android OS 版本中的一些错误，这变得非常难以做到。我们尝试了几种方法来确定是否终止点击事件……一种是基于触发触摸事件的元素，另一种是触摸事件的位置。这是必要的，因为浏览器不一定将鼠标事件分派到它用于触摸事件的同一元素。

于 2016-04-26T08:49:33.557 回答