1

起動時の 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 経由で送信) から取得したいデータが複製されます。2回送信していることに気付き、最終的にはボタンをクリックしたときのことでした.

これはコンソールからの出力です (2 回): false undefined null

また、アラートメッセージボックス（2回）「ボタン」。

私は次のようないくつかの解決策を試しました：

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;  

      });

functions.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';
});

私の理解が正しければ、mobileinitjQuery 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 で 1 回使用します。

$(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

私が遭遇した double-vclicks のもう 1 つの原因は、マウス イベントに加えて両方のタッチ イベントを合成する Chromium によるものです。この原因を確認するには、デスクトップ Chrome の開発者向けの「デバイス モード」(マウス カーソルが円に変わる) でアプリを実行し、問題が存在することを確認してから、デバイス モードをオフに切り替え、問題が「修正済み」であることを確認しました。

jblas がそれについて説明しています。部分的な抜粋:

vclick は、ブラウザによって生成される合成されたマウス/クリック イベントを抑制しないことに注意してください。これは、vclick がどのコンテキストで使用されているかを認識していないためです。また、フォーム入力要素が正常に機能するには、マウス/クリック イベントが必要です。

ジョイスティックまたはマウス (デスクトップ) を使用する場合、アラートは通常のマウス クリック イベントで発生します。

タッチの使用中にクリック イベントを抑制したい場合は、vclick ハンドラで event.preventDefault() を呼び出す必要があります。これにより、後続のクリック イベントを強制終了する要求がキューに入れられますが、デバイス ベンダーがイベントを実装する方法の違いと、さまざまな Android OS バージョン内のいくつかのバグにより、これを行うのは非常に困難であることが判明しました。クリック イベントを強制終了するかどうかを判断するために、いくつかの方法を試します。1 つはタッチ イベントがトリガーされた要素に基づいており、もう 1 つはタッチ イベントの位置に基づいています。これが必要になるのは、ブラウザがタッチ イベントに使用したのと同じ要素にマウス イベントをディスパッチするとは限らないためです。

于 2016-04-26T08:49:33.557 に答える