それらは100%一緒に存在する可能性があり、これは良い答えのない素晴らしい質問です...モバイルデバイスを使用している場合、mouseenterイベントがタップでスローされます...onclickとmouseenterも検出している場合の場合、モバイルデバイスとデスクトップマシンの間に不一致が生じます。
現時点では、このような小さな問題を解決するのは難しいです。
const x = document.getElementById('some_node')
x.onclick=(e)=>{
e.stopPropagation()
// this logic will be triggered on click for both desktop and mobile
}
x.onmouseenter=(e)=>{
e.stopPropagation()
// this logic will be triggered on click for mobile only (but will
//have already been triggered on desktop when cursor entered node)
}
私がこれについて思いついた唯一の回避策は、かなり賢いと思いますが、タップ/タッチにイベントリスナーを使用することです。これらのイベントが発生する順序/優先順位は次のとおりです。タッチ>マウス入力>クリック。
タッチイベントが最初に発生するため、タッチイベントリスナー(モバイルデバイスにのみ登録されます)を追加し、mouseenterイベントがトリガーされないようにする変数を変更できます(これは通常、 onclickロジック)...このように:
let isMobile = false
x.addEventListener('touchstart',(e)=>{
isMobile = true
}, false);
次に、mouseenterは次のようになります。
x.onmouseenter=(e)=>{
e.stopPropagation()
if(!isMobile){
// this logic will no longer cause a conflict between desktop and mobile
}
}