Question

我正在创建一个phonegap应用程序，但是当我开始知道触发点击事件而不是touchevent需要300MS。

我不想同时申请这两项活动。有没有办法知道它是没有现代化器的触摸设备。

这是假设的jquery代码

$('#id').on('click',funciton(e){
  alert('id was clicked');
});

无论如何都要使用纯JS / jQuery，因为phonegap应用程序已经占用了更多内存，我想尽可能少地使用库。

Answer 1

我的意思是你应该Modernizr但是......

var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
var eventType = supportsTouch ? 'ontouchstart' : 'click';

然后声明你的事件监听器：

$('#id').on(eventType, function(e) {
  alert('id was clicked');
});

Answer 2

这应该消除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() { ... });

鼠标和触摸事件是分开的，并且通过在body和touchend之间向click添加一个类来阻止任何触发其他事件的模拟，并在后者发生时再次将其删除。 / p>

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，例如，这取决于整个设置。

Answer 3

将fastclick应用于您的应用程序。你会在那里找到.js文件和文档。实现的最短（jQuery）方式是：

$(function() {
    FastClick.attach(document.body);
});

如果你不使用jQuery，你可以选择另一种方式：

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

如果您需要进一步的帮助，请告诉我们！

这是 direct link to the fastclick.js file

Answer 4

您可以尝试：

var clickEvent = ((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").on(clickEvent, myClickHandler);

Answer 5

对于 2021 年来到这里的任何人，请使用 pointers 事件，并选中 pointerType 以区分鼠标、触摸和笔。

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

5 个答案: