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类将其添加到Html标记，从而将其更改为modernizr“相似”。在这种情况下，您可以从任何地方引用它（也来自css）。

浏览器中的jquery touchstart

3 个答案: