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

我正在创建一个phonegap应用程序，但我知道触发click事件而不是touchevent需要300毫秒

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

下面是假设的jquery代码

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

因为phonegap应用程序已经占用了更多的内存，我希望尽可能少地使用库。

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

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

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

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

如果你需要进一步的帮助，请告诉我

这是应用于您的应用程序的

。你会在那里找到一个.js文件和一个文档。最短的（jQuery）实现方法是：

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

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

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

如果你需要进一步的帮助，请告诉我

---

这是

我的意思是你真的应该

现代化

，但是

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

然后将事件侦听器声明为：

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

---

我的意思是你真的应该现代化但是

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

然后将事件侦听器声明为：

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

---

这将消除300毫秒的延迟，并触发桌面和触摸设备上的模拟点击：

$('#id').on('mousedown touchstart', function() {

    $(this).one('mouseup touchend', function() {
        alert('id was clicked');
   });
});

如果项目中有链接（通常由

单击触发），则需要进行一些调整：

$('#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
，例如，这取决于整体设置。
这将消除300毫秒的延迟，并在桌面和触摸设备上触发模拟点击：

$('#id').on('mousedown touchstart', function() {

    $(this).one('mouseup touchend', function() {
        alert('id was clicked');
   });
});

如果项目中有链接（通常由
单击触发），则需要进行一些调整：

$('#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
，例如，这取决于整个设置。
您可以尝试：

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

您可以尝试：

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

对于2021年来到这里的任何人，使用事件，并选中
指针类型
来区分鼠标、触摸和笔。
对于2021年来到这里的任何人，使用事件，并选中
指针类型
来区分鼠标、触摸和笔，还有pen。
由于内存消耗问题，我不想使用尽可能多的库，所以纯JS/jQuery是否也可以这样做。@Sithys Asker已经说过他不想加载任何库因为phonegap应用程序已经占用了更多的内存，所以我想尽可能少地使用库。就像你看到的Tushar一样，它是经过编辑的-在编辑之前，没有关于它的任何消息；-）你不应该担心内存问题。如果您的应用程序太大，导致内存问题，您应该考虑本机编程。科尔多瓦是一个网络视图。我们的应用程序中有大量的库，绝对没有内存问题。刚查过，对我们的一个客户来说，最大的应用是：27个图书馆。（像一个charme一样工作）纯JS/jQuery也可以这样做，因为由于内存消耗问题，我不想使用尽可能多的库。@Sithys Asker已经说过他不想加载任何库因为phonegap应用程序已经占用了更多的内存，所以我想尽可能少地使用库。就像你看到的Tushar一样，它是经过编辑的-在编辑之前，没有关于它的任何消息；-）你不应该担心内存问题。如果您的应用程序太大，导致内存问题，您应该考虑本机编程。科尔多瓦是一个网络视图。我们的应用程序中有大量的库，绝对没有内存问题。刚查过，对我们的一个客户来说，最大的应用是：27个图书馆。（像charme一样工作）我想它会附加，但你能告诉我跨浏览器的兼容性有多高吗。请确保更改上述函数中的拼写。我试着编辑这篇文章，但它不让我，因为它是一个不够大的编辑！！我想它会附加，但是你能告诉我跨浏览器的兼容性有多强吗？请确保在上面的函数中更改拼写。我试着编辑这篇文章，但它不让我，因为它是一个不够大的编辑！！它将应用于两个事件，不是吗。谢谢它帮助我扩展了我的知识，我真的很感谢你的answ