iPadでdblclickイベントを実装する方法

私はクライアント用に作成したマーキープランナを使用しています。これは基本的に、クリックしてキャンバスにドラッグしてドラッグすることができるマーキーと家具で構成されています。私の大きな問題はタッチパネル、特にiPadで正しく動作するようになっていて、タッチパネルを使ってドラッグすることができましたが、私が動作させることができないのはキャンバスから要素を取り除くために必要なダブルクリックです。あなたが家具のタブを開くと、テーブルの上にクリックしhttps://southwestmarquees.co.uk/newsite/marquee-planner/iPadでdblclickイベントを実装する方法

し、それはそれを削除します表示されるアイコンをダブルクリック：ここで

はプランナーです。次のように私が使用するコードは次のとおりです。

$('.' + newItemClass).on('dblclick', function() { 
    // remove any table planner data that may have been added. 
    var existing_item_id = $(this).find('.add-guests').attr('data-item-id'); 
    $.ajax({ 
     type: "POST", 
     url: "/newsite/wp-admin/admin-ajax.php", 
     dataType: "json", 
     data: { 
      action: 'remove_table_planner_data', 
      item_id: existing_item_id, 
      plan_id: $('#plan-id').val() 
     }, 
     success: function (response) { 
      console.log(response); 
     } 
    }); 

    $(this).css('visibility', 'hidden'); 
});

だけで説明するのは、アクションremove_table_planner_dataだけで表にすでに保存された既存のデータを削除します。既にキャンバス上の他のアイテムのいずれも影響されないように、私はthis pageで行わ提案を実現しようと、それはiOSのようにそれを認識していても

（私はremove()を使用した場合、他の要素の周りジャンプことを見出し）の可視性を使用しますデバイスをダブルクリックすると、コードが動作しなくなります。

このプランナーがiPad上で正しく動作することが重要であるため、これに関する助けをいただければ幸いです。

出典

2017-07-18 Michael Emerson

すべてのコードを含むスタンドアロンのHTMLファイルを作成しました。唯一のjQuery依存関係。私はcodepenてiPadでそれをテストしてみた：ここhttps://codepen.io/anon/pen/ModZyK

コード：

<!DOCTYPE html> 
<html> 
<head> 
    <!-- I added this meta tag to make sure the page doesn't try to zoom when double tapping on iPad --> 
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     var timer; 
     // wait time between clicks 
     var wait_ms = 200; 
     // handler for the 1st click which adds the bind for the 2nd click 
     first_click_handler = function() { 
     clearTimeout(timer); 

     $(this).bind('click', second_click_handler); 
     timer = setTimeout((function() { 
      // unbinding the second click if the user doesn't click within the wait_time, 200ms in this case 
      $('.planner-board img').unbind('click', second_click_handler); 
     }), wait_ms); 
     } 
     // handler for the second click, which is only removing the image 
     second_click_handler = function() { 
     $(this).remove(); 
     } 

     $('.planner-board img').bind('click', first_click_handler); 
    }); 
    </script> 
</head> 
<body> 
    <div class="planner-board"> 
    <!-- ducks, why not --> 
    <img src="http://icons.iconarchive.com/icons/gianni-polito/colobrush/256/software-duck-icon.png"> 
    <img src="http://icons.iconarchive.com/icons/martin-berube/animal/256/duck-icon.png"> 
    </div> 
</body> 
</html>

出典

2017-07-18 15:00:57

こんにちは、私は私のiPadでそれをロードしようとしましたが、二重像をクリックした後、何も起こりません - 私はを何かが欠けている？私は数回試しました。 –

codepenリンクを試していますか？ * wait_ms *変数を試してみてください。より遅いダブルタップの方が高い値です。 –

実際、私は同僚のiPhoneで試してみましたが、動作します - iOSのバージョン固有の問題でなければならないと思っています....私のiPadをアップデートしようとしました –

iPadでdblclickイベントを実装する方法

答えて

関連する問題