web-dev-qa-db-ja.com

マウスがdiv内にあるかどうかを確認します

Ifステートメントを使用して、マウスが特定のdiv内にあるかどうかを確認したいのですが、次のようになります。

if ( mouse is inside #element ) {
 // do something
} else {
 return;
}

これにより、マウスが#elementの内側にあるときに関数が開始し、＃elementの外側にあるときに関数が停止します。

javascriptjqueryif-statementmouseover
10
Maarten Wolfsen

jQueryハンドラーを登録できます。

var isOnDiv = false;
$(yourDiv).mouseenter(function(){isOnDiv=true;});
$(yourDiv).mouseleave(function(){isOnDiv=false;});

jQueryの代替はありません：

document.getElementById("element").addEventListener("mouseenter", function(  ) {isOnDiv=true;});
document.getElementById("element").addEventListener("mouseout", function(  ) {isOnDiv=false;});

そしてどこか：

if ( isOnDiv===true ) {
 // do something
} else {
 return;
}
13
or hor

まあ、それはイベントの目的のようなものです。監視するdivにイベントリスナーを接続するだけです。

var div = document.getElementById('myDiv');
div.addEventListener('mouseenter', function(){
  // stuff to do when the mouse enters this div
}, false);

数学を使用して実行する場合でも、マウスの座標を取得できるように、親要素などにイベントを設定する必要があります。マウスの座標は、イベントオブジェクトに格納され、コールバックに渡されます。

var body = document.getElementsByTagName('body');
var divRect = document.getElementById('myDiv').getBoundingClientRect();
body.addEventListener('mousemove', function(event){
  if (event.clientX >= divRect.left && event.clientX <= divRect.right &&
      event.clientY >= divRect.top && event.clientY <= divRect.bottom) {
      // Mouse is inside element.
    }
}, false);

ただし、上記の方法を使用するのが最善です。

13
GMchris

単にあなたはこれを使うことができます：

var element = document.getElementById("myId");
if (element.parentNode.querySelector(":hover") == element) {
    //Mouse is inside element
} else {
    //Mouse is outside element
}
2
M. Feyz