在一个也可以在移动设备上查看的网站上工作,需要在touchstart和mousedown上绑定一个动作。
看起来像这样
$("#roll").bind("mousedown touchstart", function(event){
someAction();
它在Iphone上工作正常,但在Android上它响应两次。
event.stopPropagation();
event.preventDefault();
添加此代码会修复Android Chrome,但不适用于Android默认浏览器。任何其他技巧可以解决所有Android的问题?
我一直在使用这个功能:
//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);
更新:修改答案以支持鼠标和触摸事件在一起。
element.on('touchstart mousedown', function(e) {
e.preventDefault();
someAction();
});
preventDefault
取消了这项赛事,as per specs
你得到了触摸开始,但是一旦你取消它,你就不会再被迷住了。与接受的答案相反,除非你需要,否则你不需要打电话给stopPropagation
。即使取消,事件也会正常传播。浏览器将忽略它,但你的钩子仍然可以工作。
Mozilla agrees with me就此:
在touchstart上调用preventDefault()或者系列的第一个touchmove事件会阻止相应的鼠标事件触发
编辑:我刚刚再次阅读这个问题,你说你已经这样做了,它没有修复Android默认浏览器。不确定接受的答案如何帮助,因为它基本上做同样的事情,只是以更复杂的方式和事件传播错误(touchstart不传播,但点击确实)
考虑到对win8和chrome / firefox的评价,skyisred的评论看起来并不那么愚蠢(:P @所有的仇恨者)虽然我宁愿选择黑名单而不是他建议的白名单,但只排除了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事件之前...真的很奇怪的bug但是上面的代码为我修复了所有(测试了OSX,Win,iOS 5 + 6,Android 2 + 4,每个都有原生浏览器,Chrome,Firefox,IE,Safari和Opera(如果有的话)平台。
修复了使用此代码
var mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var start = mobile ? "touchstart" : "mousedown";
$("#roll").bind(start, function(event){
我认为最好的方法是:
var hasTouchStartEvent = 'ontouchstart' in document.createElement( 'div' );
document.addEventListener( hasTouchStartEvent ? 'touchstart' : 'mousedown', function( e ) {
console.log( e.touches ? 'TouchEvent' : 'MouseEvent' );
}, false );
我建议你试试jquery-fast-click。我在这个问题和others上尝试了另一种方法。每个固定的一个问题,并介绍另一个。第一次在Android,ios,桌面和桌面触摸浏览器上快速点击工作(呻吟)。
编写此代码并添加j查询打孔触摸js.it将使用触摸事件模拟鼠标事件
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);
}
这种原生解决方案最适合我:
touchstart
事件添加到文档设置全局touch = true
。if (touch && e.type === 'mousedown') return;
哇,这个和相关问题的答案很多,但是没有对我有用(Chrome,mobil response,mousedown + touchstart)。但是这个:
(e) => {
if(typeof(window.ontouchstart) != 'undefined' && e.type == 'mousedown') return;
// do anything...
}