浏览器中的jquery touchstart

Question

因为大多数桌面浏览器还不支持touchstart/touchend。如何创建与mousedown事件(所有浏览器都支持)相同的touchstart事件。

我想要这样的东西

$('obj').bind('touchstart', function(e){
});

将被翻译成

$('obj').bind('mousedown', function(e){
})

Answer 1

您可以同时绑定这两个组件。

$('obj').bind('touchstart mousedown', function(e){
});

如果您想让mousedown事件自动触发touchstart事件(因此您只需要绑定touchstart)，请使用...

$(document).bind('mousedown', function(event) {
    $(event.target).trigger('touchstart');
});

请注意，这意味着mousedown事件必须先传播到document，然后才能触发自定义touchstart事件。这可能会产生意想不到的副作用。

Answer 2

尝试如下所示：

var clickEventType = ((document.ontouchstart!==null)?'click':'touchstart');

$('obj').bind(clickEventType, function(e){});

更好的方法是使用.on()进行绑定：

$('body').on(clickEventType, 'obj', function(e){});

这将检查文档以查看touchstart是否存在，如果存在，则事件为“touchstart”如果不存在(大多数桌面浏览器)，则事件为“click”。

您也可以使用相同的事件类型触发：

$('obj').trigger(clickEventType);

Answer 3

这不是最好的解决方案，但到目前为止我发现的最好的解决方案。没落？它只在第一次接触发生后才起作用，所以你不能同步使用:(

 var isTouch = false;
 $('body').on('touchstart', function () {
    isTouch = true;
 });

你也可以检查浏览器是否支持触摸屏，比如用modernizr。

记住不要在全局作用域中使用它(除非迫不得已)。您还可以通过在isTouch = true代码后添加$('html').addClass('is-touch-device')将is-touch-device类添加到超文本标记语言标记中，将其更改为“类似”。在这种情况下，你可以从任何地方引用它(也可以从css )。