javascript - タッチイベントのサポートを検出し、「クリック」または「タッチエンド」イベントを割り当てるためのより洗練された方法はありますか？

Question

var ClickOrTouchEvent = ("ontouchend" in document.documentElement ? "touchend" : "click");

$("#MyButton").on(ClickOrTouchEvent, function () {
  // Do something
});

これは機能しますが、タッチイベントのサポートを検出し、「クリック」または「タッチエンド」イベントを割り当てるためのより洗練された方法がおそらくあります。

Answer 1

ドラッグアンドドロップなど、jqueryベースのWebアプリに高度なタッチサポートを追加するために作成されたプラグインは多数あります。自分で作成する代わりに、それらの1つを使用できます。

とはいえ、私の経験では、それらすべてに奇妙な問題があるように思われるので、おそらくtweekする必要があります。あなたのソリューションは、ほとんどのソリューションと同じファミリーに属しているようです。人気のあるプラグインと、タッチまたはクリックを決定するためにそれらが採用するソリューションを次に示します。

TouchPunchは、次のようにすべてにタッチを追加します。

// Detect touch support and save it in support
  $.support.touch = 'ontouchend' in document;

  // Ignore browsers without touch support
  if (!$.support.touch) {
    return;
  }
//rest of plugin code follows

jquery-ui-for-ipad-and-iphoneには、目的の要素にタッチイベントを追加するために呼び出す必要のあるメソッドがあります...ただし、ブラウザーがそれをサポートしている場合に限ります。

// Same deal. Detect touch support and save it in support
$.extend($.support, {
        touch: "ontouchend" in document
});

//
// Hook up touch events
//
$.fn.addTouch = function() {
        if ($.support.touch) {
                this.each(function(i,el){
                        el.addEventListener("touchstart", iPadTouchHandler, false);
                        el.addEventListener("touchmove", iPadTouchHandler, false);
                        el.addEventListener("touchend", iPadTouchHandler, false);
                        el.addEventListener("touchcancel", iPadTouchHandler, false);
                });
        }
};



....

次に、jQueryUI関数が適用されている要素に対してaddTouchを呼び出します。

$('Element').dialog().addTouch();