jquery が子要素の対応するマウスアウトイベントを防ぐ方法について-jsチュートリアル-php.cn

jquery が子要素の対応するマウスアウトイベントを防ぐ方法について

黄舟

リリース： 2017-06-28 11:43:20

オリジナル

1282 人が閲覧しました

jquery が子要素に対応するマウスアウトイベントを防ぐ方法:mouseout には、マウスが子要素に移動すると、このイベントもトリガーされる機能があります。ただし、実際のアプリケーションでは、この機能は望ましくないことがよくあります。コードは次のとおりです
サンプルの紹介この効果を実現する方法、コード例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#father
{
  width:100px;
  height:100px;
  background:red;
}
#inner
{
  width:50px;
  height:50px;
  background:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#father").mouseout(function(e){ 
    evt = window.event||e; 
    var obj=evt.toElement||evt.relatedTarget; 
    var pa=this; 
    if(pa.contains(obj)) return false; 
    $(this).hide(); 
  });   
})
</script>
</head>
<body>
<p id="father">
  <p id="inner"></p>
</p>
</body>
</html

ログイン後にコピー

上記のコードは、マウスポインターが子 p に移動したときにイベントがトリガーされません。マウスが親 p の外に移動すると、イベントがトリガーされます。この効果を達成するプロセスを見てみましょう。

1. 実装原理:
原理は非常に単純で、マウスポインターが移動したときに、イベントの対象ノードに関連するノードが子要素であるかどうかを判断します。子要素でない場合、イベントはトリガーされません。
2. 関連資料:
1. マウスアウトイベントについては、jQuery のマウスアウトイベントの章を参照してください。
2.evt = window.event||e、var ev=window.event||ev の機能とは何かの章を参照してください。
3. toElement 属性については、JavaScript の toElement イベント属性の章を参照してください。
4. RELATEDTARGET 属性については、JavaScript の RELATEDTARGET イベント属性の章を参照してください。
5.これは、JavaScript でのこの使用法の詳細な説明にあります。
6.contains() 関数は、jQuery.contains() メソッドの章にあります。
7. Hide() 関数については、jQuery の Hide() メソッドの章を参照してください。

以上がjquery が子要素の対応するマウスアウトイベントを防ぐ方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。