Браузер, обрабатывающий событие mouseover для сенсорных устройств, вызывает неправильное событие нажатия для запуска

Question

У меня проблема с тем, как браузеры обрабатывают события mouseover и mouseleave на сенсорных устройствах.

У меня есть один элемент A, который показывает и скрывает другой элемент B, когда вы наведите указатель мыши. Элемент B - это кнопка с событием клика. Это прекрасно, если вы используете мышь, но при использовании сенсорного ввода нет курсора. Браузеры автоматически обрабатывают это так, что когда вы нажимаете один раз на элемент, событие mouseover запускается, и когда вы нажимаете в другом месте на экране, происходит событие mouseleave (что имеет смысл большую часть времени).

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

Я собрал простой jsfiddle демонстрации проблемы: https://jsfiddle.net/djmpx1q4/1/

$("#outer").hover(function(){ 
 
\t show(); 
 
}, function(){ 
 
\t hide(); 
 
}); 
 

 
function show() 
 
{ 
 
\t $("#inner").css('display', 'block'); 
 
    $("#inner").on('click', function(){ 
 
    \t alert('hello'); 
 
    }); 
 
} 
 

 
function hide() 
 
{ 
 
\t $("#inner").css('display', 'none'); 
 
    $("#inner").off('click'); 
 
}

#outer { 
 
    padding:50px; 
 
    width:200px; 
 
    height: 200px; 
 
    background-color: #FFFFFF; 
 
} 
 

 
#border { 
 
    border: 1px solid black; 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
#inner { 
 
    display: none; 
 
    width:100%; 
 
    height:100%; 
 
    background-color: #CC0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="outer"> 
 
<div id="border"> 
 
<div id="inner"> 
 

 
</div> 
 
</div> 
 
</div>

Мне нужно, что быть 2 отводы, первый, чтобы показать красную коробку и второй огонь событие click, сохраняя поведение мыши для пользователей мыши.

Я действительно не уверен, что именно происходит там. Элемент не отображается и не имеет привязанного к событию момента, когда пользователь в первый раз забирает его, и все равно событие запускается.

Answer 1

Попробуйте добавить следующий метод к коду:

function detectMobile() { 
    try { 
    document.createEvent("TouchEvent"); 
    return true; 
    } catch (e) { 
    return false;; 
    } 
} 

Этот метод будет пытаться поднять сенсорное событие. Затем вы можете использовать его, чтобы определить, использует ли пользователь устройство с сенсорным экраном и соответствующим образом скорректирует ваш код.

См. Это JSFiddle для (несколько изменчивого) примера.