将元素绑定到 touchstart 并单击答案

【问题标题】：bind elements to touchstart and click将元素绑定到 touchstart 并单击
【发布时间】：2013-06-12 10:50:05
【问题描述】：

我有 div 滑块，它不能在点击时工作，但在 pc 浏览器上它工作正常。它不工作，因为我认为我使用了 onclick 事件。

但是当我添加时，

$('.sliderImage').live("click touchstart", function (event) {
    alert('click event is ' + event.type);
});

这在 html 中，因此所有 div 在第一次单击时此警报有效并且 div 正在移动...删除此功能后移动不起作用。有没有其他方法可以将元素绑定到触摸。

【问题讨论】：

你不应该再使用.live()，它在最近的jQuery版本中被弃用和删除了。
顺便说一句，点击也应该触发 click 事件，它基本上是 touchstart -> touchend -> click 按此顺序。

标签： jquery html tablet

【解决方案1】：

正如杰克所说，使用“on”而不是“live”作为绑定方法。您可能需要考虑检测设备是否支持触摸并将其用作绑定的基础。某些设备会同时触发 click 和 touchstart，从而导致不可预知的效果。

/* Touch event support */
utils.POINTER_EVENT = (function() {
//check if the browser supports touch events
    var supportsTouch = 'createTouch' in document;
    //base our event names on the result...
    var obj = {
        START:  (supportsTouch) ? 'touchstart'  : 'mousedown',
        MOVE:   (supportsTouch) ? 'touchmove'   : 'mousemove',
        END:    (supportsTouch) ? 'touchend'    : 'mouseup',
    getPointerPosition: function(ev) { return { x: (supportsTouch) ? ev.touches[0].pageX : ev.pageX, y: (supportsTouch) ? ev.touches[0].pageY : ev.pageY }; }
    };
    return obj;
})();

然后绑定到 utils.POINTER_EVENT

【讨论】：