如果事件类型是触摸事件(touchstart),那么在单击事件(click)之前应该先触发touchstart。因此,我会在触摸事件触发时删除单击事件的处理程序。这种方法似乎非常适合我的需求:
$('.do-popdown').on('click touchstart', handlePopdown);
function handlePopdown(e){
if(e.type == 'touchstart') {
$('.do-popdown').off('click', handlePopdown).click(function(e){
e.stopPropagation();
e.preventDefault();
return false;
});
}
e.stopPropagation();
e.preventDefault();
return false;
}
e.stopPropagation(); e.preventDefault(); return false;
可能有点过度,但我在各种不同的元素(<a>
、<div>
、<span>
、<button>
等)上使用它,它满足了我的通常需求。
编辑:一个更通用(更好?)的方法是创建类似于熟悉的 .click()
事件绑定器:
jQuery.fn.extend({
clickOrTouch: function(handler) {
return this.each(function() {
var event = ('ontouchstart' in document) ? 'touchstart' : 'click';
$(this).on(event, handler);
});
}
});
这样,只有适当的事件附加到所选元素。
我想一个更“合适”的名称应该是.touchstartOrClick()
,但由于它在某种程度上是.click()
的替代,我决定以click
开头命名。
这可以像.click()
一样使用。例如,在div
中放置一个button
并运行:
$('button').clickOrTouch(doSomething);
$('div').clickOrTouch(doSomething);
function doSomething(e) {
$('body').append(this.tagName + ' ' + e.type + '<br>');
e.stopPropagation();
}
这将根据触发方式显示“DIV click”或“BUTTON touchstart”。如果在链接上使用,请在处理程序中添加e.preventDefault()
(如果需要)。
e.stopPropagation()
无法阻止第二个事件的触发。不过,e.preventDefault()
可以解决这个问题。 - Jonathan Lidbecke.stopPropagation()
如何停止第二个事件?它以及e.preventDefault()
只对当前事件起作用,这里我们将有两个独立的事件。 - Georgii Ivankin