9
私は説明できない非常に奇妙な行動を見つけました。次の操作を実行したい：タッチスタートの代わりにマウスオーバーが発生することがあります - なぜですか？
ハンドラは、入力デバイスの種類に応じて、touchstartまたはmouseoverイベントに反応する必要があります。 （マウスとタッチスクリーンの両方で）ハイブリッドデバイスをサポートしたいと思い、ポインタイベントに依存できないことに注意してください。
ここでは、touchstartとmouseoverの両方のイベントを設定しました。そして、ほとんどの場合、それはうまく動作します。 preventDefaultを使用して、タッチイベント後のシミュレートされた「マウス」イベントの発射を禁止します。しかし、どのような私には全く混乱していることが時々まだmouseoverイベントoccuringがあり、私はでpreventDefaultを削除する場合は、それもmouseoverではなくtouchstartのを発射されているようだということです。なぜこのようなことが起こっているのですか？
さらに、これはAndroidとiOSの両方で再現可能です！ Android（Chromeを使用）ではより簡単に起動するようです。
私は少しテストケースを用意していますので、自分で試してみることができます。この現象は、赤いDIV（イベントを含む）と背景の境界線のどこかをタップすると発生したように見えることに注意してください。センターをタップするだけで100％動作します。それが起こるまで、あなたは多かれ少なかれの試練を必要とするかもしれません。
大変助かりました！
<!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>
mousedownイベントの座標を見ると、モバイルモードで（モバイルの外で）エッジをクリックするとChromeの座標が正しくありません。 –
こんにちは、私はクロム、https://jsfiddle.net/xvtgc36r/1/にあなたのバグを再現することができません –
うーん、あなたのコードは少し異なります。また、タッチデバイスでテストすることを確認してください。 –