在开发一个可以在移动设备上浏览的网站时，需要同时绑定在touchstart和mousedown事件上执行的操作。
看起来像这样：
$("#roll").bind("mousedown touchstart", function(event){
someAction();
在 iPhone 上表现良好，但在 Android 上会响应两次。
event.stopPropagation();
event.preventDefault();
将这段代码添加后解决了Android Chrome的问题，但未能解决Android默认浏览器的问题。还有其他技巧可以解决所有Android的问题吗？
element.on('touchstart mousedown', function(e) {
e.preventDefault();
someAction();
});
preventDefault取消事件，根据规范
你会得到touchstart，但是一旦你取消了它，你将不再得到mousedown。与被接受的答案所说的相反，除非有必要，否则你不需要调用stopPropagation。即使被取消，事件仍然会正常传播。浏览器会忽略它，但是你的钩子仍然会起作用。
Mozilla在这一点上同意：
调用preventDefault()在touchstart或者一个系列中的第一个touchmove事件可以防止相应的鼠标事件触发。
编辑：我刚刚重新读了问题，你说你已经这样做了，而且它并没有修复Android默认浏览器的问题。不确定被接受的答案如何帮助，因为它基本上做了相同的事情，只是以更复杂的方式和具有事件传播错误（touchstart不传播，但click传播）。
我一直在使用这个函数：
//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);
更新：修改答案以支持鼠标和触摸事件共同使用。
touchstart 相当于 mousedown 而不是 click。 click 需要用户按下按钮。 我不认为这两者会产生完全相同的结果。 - George ReithstopPropagation()、preventDefault() 或嗅探设备类型。我假设设备支持触摸和鼠标输入，来开发这个解决方案。touchstart 2）touchmove 3）touchend 4）mousemove 5）mousedown 6）mouseup 7）click。基于此，我们将从 touchstart（链中的第一个）到 click（链中的最后一个）标记触摸交互。如果在此触摸交互之外注册了 mousedown，则可以安全地进行拾取。var touchStarted = false;
document.onMouseDown.listen((evt) {
if (!touchStarted) processInput(evt);
});
document.onClick.listen((evt) {
touchStarted = false;
});
document.onTouchStart.listen((evt) {
touchStarted = true;
processInput(evt);
});
正如您所看到的，我的监听器被放置在document上。因此，我不能使用stopPropagation()或preventDefault()来阻止这些事件，以便它们可以冒泡到其他元素。这个解决方案帮助我单独处理一个交互操作，并希望它能对您有所帮助！
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事件...这是一个非常奇怪的错误，但上面的代码对我在测试过的所有平台上都起作用了（包括Mac OS、Windows、iOS 5+6、Android 2+4以及各自的原生浏览器、Chrome、Firefox、IE、Safari和Opera，如果有的话）。
哇，这个问题和相关问题中有很多答案，但是没有一个对我有效（针对Chrome，移动响应，mousedown + touchstart）。但是这个：
Original Answer
翻译成：最初的回答
(e) => {
if(typeof(window.ontouchstart) != 'undefined' && e.type == 'mousedown') return;
// do anything...
}
使用此代码已修复
var mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var start = mobile ? "touchstart" : "mousedown";
$("#roll").bind(start, function(event){
touchstart或mousedown触发函数，它只会触发mousedown。没有范围时，它会不断触发你第一次触发的那个结果。 - l3lue编写此代码并添加j query punch touch 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);
}
我建议你尝试使用 jquery-fast-click。我在这个问题上试过其他方法，还有其他方法。每种方法都解决了一个问题，但又引入了另一个问题。fast-click在Android、iOS、桌面浏览器和桌面触摸浏览器上第一次就起作用了（呻吟声）。
这个本地解决方案对我来说效果最好：
touchstart 事件，设置全局变量 touch = true。if (touch && e.type === 'mousedown') return;我认为最好的方法是：
var hasTouchStartEvent = 'ontouchstart' in document.createElement( 'div' );
document.addEventListener( hasTouchStartEvent ? 'touchstart' : 'mousedown', function( e ) {
console.log( e.touches ? 'TouchEvent' : 'MouseEvent' );
}, false );