我正在创建一个phonegap应用程序,但我知道触发点击事件而不是触摸事件需要300MS。
我不想同时应用这两个事件。有没有办法知道这是不是没有现代化的触摸设备。
以下是假设的jquery代码
$('#id').on('click',funciton(e){
alert('id was clicked');
});
有没有用纯JS/jQuery来做这件事,因为phonegap应用程序已经占用了更多的内存,我想尽可能使用更少的库。
我的意思是你真的应该Modernizr
,但是。。。
var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
var eventType = supportsTouch ? 'ontouchstart' : 'click';
然后将事件侦听器声明为:
$('#id').on(eventType, function(e) {
alert('id was clicked');
});
这应该可以消除300ms的延迟,并触发桌面和触摸设备上的模拟点击:
$('#id').on('mousedown touchstart', function() {
$(this).one('mouseup touchend', function() {
alert('id was clicked');
});
});
如果项目中有链接(通常由click
触发),则需要进行一些调整:
$('#id a').on('mousedown touchstart', function() {
var destination = this.attr('href');
$(this).one('mouseup touchend', function() {
if (destination) window.location = destination;
});
});
编辑-已经有了一个被接受的答案,这个回复更多的是一个额外的注释。但nirmal的评论是正确的,即模拟鼠标事件的触摸设备可能会导致并发症。因此,上述代码更适合仅与触摸事件一起使用。
为了更完整地回答这个问题,我将发布我同时处理触摸和鼠标事件的方法。然后,任一序列都将触发名为page:tap
的自定义事件。然后可以按照以下方式收听这些模拟点击:
$(subject).on('page:tap', function() { ... });
鼠标和触摸事件是分开的,并且通过在touchend
和click
之间向body
添加一个类来防止任何触发附加事件的模拟,当后者发生时再次将其移除。
var root = $('body'), subject = '#example_1, #example_2';
$(document).on('mousedown touchstart', subject, function(e) {
if (e.type == 'mousedown' && e.which != 1) return; // only respond to left clicks
var mean = $(e.currentTarget);
mean.one('mouseup touchend', function(e) {
if (e.type == 'touchend' && !root.hasClass('punch')) root.addClass('punch');
else if (root.hasClass('punch')) return;
mean.trigger('page:tap');
});
})
.on('click', subject, function() {
root.removeClass('punch');
return false;
});
也可以选择将类添加到活动元素本身或html
,例如,这在一定程度上取决于整个设置。
对应用程序应用快速单击。你会在那里找到一个.js文件和一个文档。实现这一点的最短(jQuery)方法是:
$(function() {
FastClick.attach(document.body);
});
如果你不使用jQuery,你可以选择另一种方式:
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
如果你需要进一步的帮助,请告诉我!
这是指向fastclick.js文件的直接链接
您可以尝试:
var clickEvent = ((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").on(clickEvent, myClickHandler);
对于2021年来这里的任何人,请使用指针事件,并检查pointerType
以区分鼠标、触摸和笔。