Açıklayamayacağım çok garip bir davranış buldum. Aşağıdaki yapmak ister:mouseover bazen touchstart yerine ateş ediyor - neden?
bir işleyici giriş cihazının türüne bağlı olarak, bir touchstartveyamouseover olaya tepki gerekmektedir. Karma aygıtları (hem fare hem de dokunmatik ekranla) desteklemek istediğimi ve işaretçi olaylarına güvenemeyeceğimi unutmayın.
Şimdi hem touchstart hem de mouseover olaylarını kurdum. Ve çoğu için sadece iyi çalışıyor. Ayrıca dokunma olaylarından sonra simüle edilen "fare" olaylarını engellemek için preventDefault'u kullanın. Ama ne bana tamamen kafa karıştırıcı bazen hareketsiz bir mouseover olay husul yoktur ve ben preventDefault kaldırırsanız, hatta mouseover yerine touchstart aittetiklendiğini görünüyor olmasıdır. Neden bu neden oluyor? Ayrıca, bu hem Android hem de iOS ile yeniden üretilebilir! Android ile daha kolay bir şekilde tetiklense de (Chrome kullanarak).
Kendiniz için deneyebileceğiniz küçük bir test çantası hazırladım. Bu davranışın yalnızca kırmızı DIV (olayları içeren) ve arka plan arasındaki sınırda bir yere dokunduğunuzda tetiklendiğini unutmayın. Sadece merkeze dokunmak% 100 çalışır. Ve olana kadar az ya da çok deneye ihtiyacınız olabilir.
Herhangi bir yardım büyük beğeni topladı!
<!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>
Eğer mousedown olayı koordinatlarına bakacaksanız, mobil modda kenarları (hemen dışında) tıkladığınızda Chrome koordinatları doğru değil. –
Hey, hatayı kromda üretemiyorum, https://jsfiddle.net/xvtgc36r/1/ –
Hmm, kodunuz biraz farklı. Ayrıca bir dokunmatik cihaz üzerinde test ettiğinizden emin olun. –