5

mouseenterとclickイベントが一緒に存在でき、次のチェックボックスをオンにすると、両方がTRUEになる可能性があるかどうか疑問に思っています。

if ((evt.type === 'mouseenter') && (evt.type === 'click'))  

これは、リンクの上にマウスを置くと、mouseenterがトリガーされ(TRUEに設定)、クリックしてもホバーが表示されるためです。おそらくそれらは一緒に存在する可能性がありますが、私はこれについての専門家ではありません。

誰かが洞察を与えることができれば、私はそれを大いに感謝します。

また、mouseenterイベント中にクリックイベントをトリガーするにはどうすればよいですか?

4

6 に答える 6

4

mouseenterマウスがコントロールに入ると、イベントが発生します。クリックイベントは、マウスがクリックされたときに発生します。これらは、2つの別個のイベントハンドラーを呼び出す2つの別個のイベントです。マウスが要素に入るときにクリックすると、それらは互いに短い時間間隔で呼び出されますが、それでも2つの異なるイベントです。

mouseentermouseoverイベントを区別することも重要です。mouseenterマウスが要素に物理的に入るとmouseover発火しますが、マウスが要素の上に留まっている間は継続的に発火します。

クリックイベント自体をトリガーすることはできませんが、クリックイベントハンドラーによって呼び出されるのと同じ関数を呼び出すことができます。たとえば、これがある場合:

var myfunc = function (e) { ... }
document.getElementById("id").onclick = myfunc;

次に、直接呼び出すだけmyfuncで、マウスがクリックされた場合と同じ結果が得られます。

于 2012-12-20T07:10:40.453 に答える
2

それらは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
  }
}
于 2020-11-28T22:44:58.660 に答える
0

最初の質問については、私はあなたが答えを得たと思います....

ただし、mouseenterイベント中にクリックイベントをトリガーするにはどうすればよいですか?

uはtrigger()関数を使用できます。

http://jsfiddle.net/PDhBW/2/

あなたがここについてもっと読みたいならtrigger 、リンクがあります

http://api.jquery.com/trigger/

于 2012-12-20T07:18:20.540 に答える
0

それらは同じオブジェクト上に存在する可能性があり、ホバー状態のボタンを考えてからクリックアクションを実行します。ただし、クリックイベントは、エンターイベントが実際に以前に発生したため、クリックイベントのみを読み取ります。

のような変数を作成しmouseIsOver、enterイベントが発生したときにtrueに設定できます。クリックが発生した場合、マウスは同じターゲット上にあると私は安全に推測できます。

于 2012-12-20T07:10:11.600 に答える
0

2つのイベントは同時に発生する可能性がありますが、それでも次々に処理されます。したがって、if投稿したものがに評価されることはありませんtrue

コードをもう一度見ると、意味がないことがわかります。どうすればXとYを同時にすることができますか?できません。

于 2012-12-20T07:10:19.900 に答える
0

Jqueryイベント委任を使用すると、複数のイベントのバインドを一度に使用できます

$('#IdElement').on('mouseenter click', function () {
    //Your Code
});

http://jqfundamentals.com/chapter/events

于 2020-04-03T16:07:36.050 に答える