javascript - Find if device is touch screen then apply touch event instead of click event - Stack Overflow

admin管理员组

文章数量:1021134

I am creating a phonegap application, but as I came to know that it takes 300MS to trigger click event instead of touchevent.

I don't want to apply both event. Is there any way to know if it's touch device without modernizer.

Here is jquery code for assumption

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

is there anyway to do it with pure JS/jQuery as phonegap application already takes more memory I want to use less library as I can.

I am creating a phonegap application, but as I came to know that it takes 300MS to trigger click event instead of touchevent.

I don't want to apply both event. Is there any way to know if it's touch device without modernizer.

Here is jquery code for assumption

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

is there anyway to do it with pure JS/jQuery as phonegap application already takes more memory I want to use less library as I can.

• javascript
• jquery
• cordova

Share Improve this question Follow edited Apr 20, 2015 at 11:50 nirmal asked Apr 20, 2015 at 11:46 nirmalnirmal 2,19011 gold badge2121 silver badges2929 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

I mean really you should Modernizr but...

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

Then declare your event listeners as such:

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

This should eliminate the 300ms delay and trigger simulated clicks on desktop and touch devices :

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

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

If the item has a link in it (normally triggered by click), it would need some adaptation :

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

    var destination = this.attr('href');

    $(this).one('mouseup touchend', function() {
        if (destination) window.location = destination;
    });
});

---

Edit - already having an accepted answer, this reply was more of an additional note. But nirmal was correct in the ments that touch devices emulating mouse events might lead to plications. The above code is therefore better suited to use with touch events only.

To be more plete with this answer, I'll post my approach for handling both touch and mouse events simultaneously. Either sequence will then trigger a custom event named page:tap. Listening for these simulated clicks can then be done as follows:

$(subject).on('page:tap', function() { ... });

Mouse and touch events are separated and any emulation triggering additional events is prevented by adding a class to body in between touchend and click, removing it again when the latter occurs.

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;
});

One could also choose to add the class to the active element itself or html for example, that depends a bit on the setup as a whole.

Apply fastclick to your application. You'll find a .js file and a documentation over there. The shortest (jQuery) way of implementing that would be:

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

If you don't use jQuery, you can choose the other way:

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

Let me know if you need further help!

This is the direct link to the fastclick.js file

You can try:

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

for anyone ing here in 2021, use pointers events, and check pointerType to distinguish between mouse, touch, and pen.

I am creating a phonegap application, but as I came to know that it takes 300MS to trigger click event instead of touchevent.

I don't want to apply both event. Is there any way to know if it's touch device without modernizer.

Here is jquery code for assumption

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

is there anyway to do it with pure JS/jQuery as phonegap application already takes more memory I want to use less library as I can.

I am creating a phonegap application, but as I came to know that it takes 300MS to trigger click event instead of touchevent.

I don't want to apply both event. Is there any way to know if it's touch device without modernizer.

Here is jquery code for assumption

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

is there anyway to do it with pure JS/jQuery as phonegap application already takes more memory I want to use less library as I can.

• javascript
• jquery
• cordova

Share Improve this question Follow edited Apr 20, 2015 at 11:50 nirmal asked Apr 20, 2015 at 11:46 nirmalnirmal 2,19011 gold badge2121 silver badges2929 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

I mean really you should Modernizr but...

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

Then declare your event listeners as such:

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

This should eliminate the 300ms delay and trigger simulated clicks on desktop and touch devices :

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

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

If the item has a link in it (normally triggered by click), it would need some adaptation :

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

    var destination = this.attr('href');

    $(this).one('mouseup touchend', function() {
        if (destination) window.location = destination;
    });
});

---

Edit - already having an accepted answer, this reply was more of an additional note. But nirmal was correct in the ments that touch devices emulating mouse events might lead to plications. The above code is therefore better suited to use with touch events only.

To be more plete with this answer, I'll post my approach for handling both touch and mouse events simultaneously. Either sequence will then trigger a custom event named page:tap. Listening for these simulated clicks can then be done as follows:

$(subject).on('page:tap', function() { ... });

Mouse and touch events are separated and any emulation triggering additional events is prevented by adding a class to body in between touchend and click, removing it again when the latter occurs.

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;
});

One could also choose to add the class to the active element itself or html for example, that depends a bit on the setup as a whole.

Apply fastclick to your application. You'll find a .js file and a documentation over there. The shortest (jQuery) way of implementing that would be:

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

If you don't use jQuery, you can choose the other way:

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

Let me know if you need further help!

This is the direct link to the fastclick.js file

You can try:

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

for anyone ing here in 2021, use pointers events, and check pointerType to distinguish between mouse, touch, and pen.

本文标签： javascriptFind if device is touch screen then apply touch event instead of click eventStack Overflow