JQuery .on («click») запускает «mouseover» на сенсорном устройстве

Я сталкиваюсь с нежелательным поведением при использовании JQuery's $.on("click", function(){}); на сенсорных устройствах. Это мой код ниже:JQuery .on («click») запускает «mouseover» на сенсорном устройстве

Код:

$(".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!"); 
}

Проблема:

С выше кода, нажав на .team элемента на сенсорном устройстве одновременно запускает оба слушателя, давая мне следующий журнал:

mouseover 
Clicked!

Вопрос Зачем срабатывает mouseover на сенсорном устройстве? Это не то поведение, которое я ожидаю от устройства, у которого нет мыши. Это ошибка? Какое событие я должен использовать, так что «mouseover» запускается только тогда, когда он является фактическим указателем мыши, который входит?

Мое JQuery версия 2.2.4.

источник

2016-05-24 Marquizzo

** [Это может быть полезно] (http://stackoverflow.com/a/12187105/2065039) ** –

Это правильное поведение. Чего вы пытаетесь достичь? Недавно я столкнулся с той же проблемой (добавлены нежелательные классы на мобильном «клике») и смог решить проблему с использованием специфики CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – Mussser

Я показываю всплывающую подсказку на 'mouseover', и я прячу ее на' click'. Если эти два события запускаются одновременно, всплывающая подсказка остается видимой, когда она должна быть скрыта, потому что вы нажали. Вот почему мне не нужно запускать «mouseover», когда на устройстве нет мыши. Я подумал, что это то, для чего были «прикосновения». JQuery сделал это специально для имитации: зависания? – Marquizzo

Я просто столкнулся с той же проблемой, и это то, что я сделал для решения проблемы.

$('#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. 
}

Это то, что я сделал, и это сработало для моего прецедента. Надеюсь, это поможет кому-то в будущем. Идея состоит в том, чтобы отключить событие click в событии ввода мыши, а затем через 100 миллисекунд снова вырезать событие щелчка мыши. Это предотвратит запуск обоих событий при касании.

источник

2018-01-11 14:35:31 Grim

JQuery .on («click») запускает «mouseover» на сенсорном устройстве

ответ

Смежные вопросы