javascript-如何绑定Mousedown和Touchstart，但不同时响应两者？ Android，JQuery

在还可以在移动设备上查看并且需要在touchstart和mousedown上绑定动作的网站上工作。

看起来像这样

$("#roll").bind("mousedown touchstart", function(event){

someAction();

它可以在Iphone上正常工作，但在Android上可以响应两次。

event.stopPropagation();

event.preventDefault();

添加此代码后，Android Chrome浏览器无法修复此问题，Android默认浏览器无法修复此问题。 任何其他技巧可以解决所有android的问题？

9个解决方案

28 votes

我一直在使用此功能：

//touch click helper

(function ($) {

$.fn.tclick = function (onclick) {

this.bind("touchstart", function (e) {

onclick.call(this, e);

e.stopPropagation();

e.preventDefault();

});

this.bind("click", function (e) {

onclick.call(this, e); //substitute mousedown event for exact same result as touchstart

});

return this;

};

})(jQuery);

更新：修改后的答案可同时支持鼠标和触摸事件。

Joshua answered 2020-07-20T14:44:02Z

28 votes

element.on('touchstart mousedown', function(e) {

e.preventDefault();

someAction();

});

stopPropagation根据规范取消了该事件

您将获得touchstart，但是一旦您取消它，就不再会发生鼠标按下的情况。 与已接受的答案相反，除非需要，否则您无需致电stopPropagation。 即使取消，事件也将正常传播。 浏览器将忽略它，但是您的钩子仍将起作用。

Mozilla在这一点上同意我的观点：

在touchstart或系列的第一个touchmove事件上调用preventDefault()会阻止触发相应的鼠标事件

编辑：我只是再次阅读了该问题，并且您说您已经做到了，并且不能修复Android默认浏览器。 不确定接受的答案如何帮助，因为它基本上以相同的方式执行操作，只是以更复杂的方式并带有事件传播错误(touchstart不会传播，而click会传播)

Radu C answered 2020-07-20T14:44:40Z

3 votes

考虑到gregers对win8和chrome / firefox的评论，skyisred的评论毕竟看起来并不愚蠢(：P @ all haters)尽管我宁愿使用黑名单，也不愿使用他建议的白名单，但只能将Android从触摸绑定中排除：

var ua = navigator.userAgent.toLowerCase(),

isAndroid = ua.indexOf("android") != -1,

supportsPointer = !!window.navigator.msPointerEnabled,

ev_pointer = function(e) { ... }, // function to handle IE10's pointer events

ev_touch = function(e) { ... }, // function to handle touch events

ev_mouse = function(e) { ... }; // function to handle mouse events

if (supportsPointer) { // IE10 / Pointer Events

// reset binds

$("yourSelectorHere").on('MSPointerDown MSPointerMove MSPointerUp', ev_pointer);

} else {

$("yourSelectorHere").on('touchstart touchmove touchend', ev_touch); // touch events

if(!isAndroid) {

// in androids native browser mouse events are sometimes triggered directly w/o a preceding touchevent (most likely a bug)

// bug confirmed in android 4.0.3 and 4.1.2

$("yourSelectorHere").on('mousedown mousemove mouseup mouseleave', ev_mouse); // mouse events

}

}

顺便说一句：我发现鼠标事件并非总是触发的(如果使用了stopPropagation和preventDefault)，特别是我只在touchend事件之前注意到了一个额外的mousemove ...确实很奇怪的错误，但是上面的代码为我解决了所有问题( 分别通过本机浏览器，Chrome，Firefox，IE，Safari和Opera(如果有)平台测试了OSX，Win，iOS 5 + 6，Android 2 + 4。

Jörn Berkefeld answered 2020-07-20T14:45:05Z

1 votes

使用此代码修复

var mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);

var start = mobile ? "touchstart" : "mousedown";

$("#roll").bind(start, function(event){

skyisred answered 2020-07-20T14:45:25Z

1 votes

我认为最好的方法是：

var hasTouchStartEvent = 'ontouchstart' in document.createElement( 'div' );

document.addEventListener( hasTouchStartEvent ? 'touchstart' : 'mousedown', function( e ) {

console.log( e.touches ? 'TouchEvent' : 'MouseEvent' );

}, false );

LCB answered 2020-07-20T14:45:45Z

1 votes

哇，在这个问题和相关问题中有这么多答案，但没有一个对我有用(Chrome，移动响应，mousedown + touchstart)。 但是这个：

(e) => {

if(typeof(window.ontouchstart) != 'undefined' && e.type == 'mousedown') return;

// do anything...

}

Andreas Richter answered 2020-07-20T14:46:05Z

0 votes

我建议您尝试使用jquery-fast-click。 我在这个问题和其他问题上尝试了另一种方法。 每个问题解决了一个问题，并介绍了另一个问题。 快速点击首次在Android，ios，桌面和桌面触摸浏览器上运行()吟)。

Adam Rabung answered 2020-07-20T14:46:26Z

0 votes

编写此代码并添加j查询打孔触摸js。它将通过触摸事件模拟鼠标事件

function touchHandler(event)

{

var touches = event.changedTouches,

first = touches[0],

type = "";

switch(event.type)

{

case "touchstart": type = "mousedown"; break;

case "touchmove": type="mousemove"; break;

case "touchend": type="mouseup"; break;

default: return;

}

var simulatedEvent = document.createEvent("MouseEvent");

simulatedEvent.initMouseEvent(type, true, true, window, 1,

first.screenX, first.screenY,

first.clientX, first.clientY, false,

false, false, false, 0/*left*/, null);

first.target.dispatchEvent(simulatedEvent);

event.preventDefault();

}

function init()

{

document.addEventListener("touchstart", touchHandler, true);

document.addEventListener("touchmove", touchHandler, true);

document.addEventListener("touchend", touchHandler, true);

document.addEventListener("touchcancel", touchHandler, true);

}

Mohsin Kureshi answered 2020-07-20T14:46:46Z

0 votes

这个本机解决方案最适合我：

将if (touch && e.type === 'mousedown') return;事件添加到文档设置全局touch = true。

在mousedown / touchstart处理程序中，防止在检测到触摸屏时发生所有mousedown事件：if (touch && e.type === 'mousedown') return;

Raine Revere answered 2020-07-20T14:47:14Z