查找设备是否为触摸屏,然后应用触摸事件而不是单击事件



我正在创建一个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() { ... });

鼠标和触摸事件是分开的,并且通过在touchendclick之间向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以区分鼠标、触摸和笔。

最新更新