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

Question

我正在创建一个phonegap应用程序，但据我所知，它需要300毫秒才能触发点击事件而不是touchevent。

我不想同时应用这两个事件。 有没有办法知道它是否没有现代化的触摸设备。

这是假设的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;
    });
});

---

编辑-已经有一个已接受的答案，此答复更多是附加说明。 但是，在评论中模仿鼠标事件的触摸设备可能会导致并发症，这是正确的。 因此，以上代码更适合仅与触摸事件一起使用。

为了更完整地回答这个问题，我将发布同时处理触摸和鼠标事件的方法。 然后，这两个序列都将触发一个名为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中，这在某种程度上取决于整个设置。

Answer 3

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

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

如果您不使用jQuery，则可以选择其他方式：

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

让我知道您是否需要进一步的帮助！

这是指向fastclick.js文件的直接链接

Answer 4

你可以试试：

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