javascript - 是否有更优雅的方法来检测触摸事件支持并分配“点击”或“触摸结束”事件？

Question

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

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

这可行，但可能有一种更优雅的方法来检测触摸事件支持并分配“点击”或“触摸结束”事件。

Answer 1

人们创建了许多插件来为他们的基于 jquery 的 Web 应用程序（如拖放）添加更高级的触摸支持。您可以使用其中之一，而不是尝试自己制作。

也就是说，在我的经验中，他们似乎都有自己的奇怪问题，所以你可能不得不考虑一下。看起来您的解决方案与他们的大多数解决方案属于同一家族。以下是几个流行的插件以及它们用于决定触摸或点击的解决方案：

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);
                });
        }
};



....

然后在应用了 jQuery UI 函数的元素上调用 addTouch：

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