JQuery .on("click") triggers "mouseover" on touch device

Question

I'm encountering unwanted behavior when using JQuery's $.on("click", function(){}); on touch devices. This is my code below:

Code:

$(".team").on("mouseover", teamMouseOver);
$(".team").on("mouseout", teamMouseOut);
$(".team").on("click", teamThumbClicked);

function teamMouseOver(event){
    console.log(event.type);
}

function teamMouseOut(event){
    // Do something
}

function teamThumbClicked(event){
    console.log("Clicked!");
}

Problem:

With the code above, tapping on a .team element on a touch device simultaneously triggers both listeners, giving me the following console log:

mouseover
Clicked!

Question Why is mouseover being triggered on a touch device? This is not the behavior that I would expect from a device that doesn't have a mouse. Is this a bug? What event should I be using so "mouseover" only gets fired when it's an actual mouse pointer that's entering?

My JQuery version is 2.2.4.

Answer 1

I just ran into the same issue and this is what I did to solve the problem.

$('#myEl').on('click', myElClickEvent);

$('#myEl').on('mouseenter', myElMouseEnterEvent);

function myElClickEvent (event) {
   $(this).addClass('Clicked');
}

function myElMouseEnterEvent() {
    // Turn off events
    $('#myEl').off();

    // After 100 milliseconds cut on events, notice click event won't trigger
    setTimeout(function() {
       // .off() is used to prevent from adding multiple click events if the user hovers multiple elements too quickly.
       $('#myEl').off().on('click', myElClickEvent);             
       $('#myEl').off().on('mouseenter', myElMouseEnterEvent);
    }, 100);


   // Do some mouseenter stuff, whatever the reqs. are.
}

This is what I did and it worked fine for my use case. Hopefully this helps someone in the future. The idea is to turn off the click event within the mouse enter event and then after 100 milliseconds cut the mouse click event back on. This will prevent both events from triggering on touch.

Answer 2

I ran into the same problem and also felt that it was a bit annoying that we cant separate the two events. My approach to solve this was adding the touchend event and let it flag that it is a touch device first. Since the rest of the events will follow, I can ignore them or do something else with them and they still will still be run if triggered by a non touch device.

var touchEndDetected = false;
var mouseOverDetected = false;

$('#myEl').on('click mouseover touchend', function (e) {
    console.log('Event type: ' + e.type);

    if(mouseOverDetected) {
        console.log('Mouseover event has already run this before');
        touchEndDetected = false;
        mouseOverDetected = false;
        return;
    }

    if(touchEndDetected) {
        touchEndDetected = false;
        mouseOverDetected = true;
        console.log('Touchend event has already run this before');
        return;
    }

    if(e.type === 'touchend') {
        touchEndDetected = true;
        mouseOverDetected = false;
    }

    console.log('This code will only run once when touch');
}

Answer 3

Call .preventDefault() on the original touch event.

The API link actually provides the answer. https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent#event_firing.

In your case, you are using jQuery's .on() function, to which you can send multiple events (separated by spaces), so you can add touchstart or ontouchstart to that string and just call preventDeault() right off the bat in your handler function.

$(".team").on("click touchstart", teamThumbClicked);

// and later...

function teamThumbClicked(event){
    event.preventDefault(); // prevent further mouse events from being dispatched
    console.log("Clicked!");
}

Answer 4

The relatedTarget property of MouseEvent is null when the mouseenter or mouseover is triggered by click or touch. https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget

someElement.addEventListener("mouseover", (e)=>{
  e.relatedTarget // null if triggered by click or touch, 
                  // otherwise it refers to the element the pointer came from.
})