Znalazłem bardzo dziwne zachowanie, którego nie potrafię wyjaśnić. Chcesz wykonać następujące czynności:mouseover czasami strzela zamiast touchstart - dlaczego?
Procedura obsługi musi reagować na touchstartlubmouseover przypadku, w zależności od rodzaju urządzenia wejściowego. Zauważ, że chcę obsługiwać urządzenia hybrydowe (z myszą i ekranem dotykowym) i nie mogę polegać na zdarzeniach wskaźnika.
Teraz konfiguruję zarówno zdarzenia touchstart, jak i mouseover. I w większości przypadków działa dobrze. Użyj także preventDefault, aby zabronić symulowanych zdarzeń "myszy" wystrzeliwanych po zdarzeniach dotyku. Ale to, co jest całkowicie mylące dla mnie jest to, że czasamijest wciąż występujące mouseover wydarzenie, a jeśli usunąć preventDefault, to nawet wydaje się, że mouseover jest wypalanie zamiast z touchstart. Dlaczego, och, dlaczego tak się dzieje?
Co więcej, jest on odtwarzalny zarówno na urządzeniach z systemem Android, jak i iOS! Choć wydaje się łatwiej wyzwalany przez Androida (używając Chrome).
Przygotowałem małą próbkę, abyś mógł spróbować sam. Zauważ, że to zachowanie wydaje się być uruchamiane tylko po dotknięciu gdzieś na granicy między czerwonym DIV (który ma zdarzenia) a tłem. Po prostu stukanie w centrum działa w 100%. Możesz potrzebować więcej lub mniej prób, dopóki to się nie stanie.
Każda pomoc bardzo doceniona!
<!DOCTYPE html>
<html>
<head>
<title>Touchtest</title>
<style>
body {
background: #222;
color: white;
position: relative;
font-size: .9em;
font-family: Arial, Helvetica, sans-serif;
}
#test {
position: fixed;
top: 100px;
right: 100px;
bottom: 100px;
left: 100px;
background: red;
}
</style>
</head>
<body>
<div id="test"></div>
<script type="text/javascript">
function testEvent(event) {
console.log("testEvent", event);
if (event.type === "mouseover") {
alert("MOUSEOVER DETECTED");
}
event.preventDefault();
}
var ele = document.getElementById("test");
ele.addEventListener("touchstart", testEvent);
ele.addEventListener("mouseover", testEvent);
</script>
</body>
</html>
Jeśli spojrzysz na współrzędne zdarzeń mousedown, zobaczysz, że po kliknięciu krawędzi (tuż na zewnątrz) w trybie mobilnym za pomocą Chrome współrzędne nie są poprawne. –
Hej, nie mogę odtworzyć twojego błędu w chrome, https://jsfiddle.net/xvtgc36r/1/ –
Hmm, twój kod nieco się różni. Upewnij się również, że testujesz na urządzeniu dotykowym. –