ホームページ > 記事 > ウェブフロントエンド > jquery が子要素の対応するマウスアウト イベントを防ぐ方法について
jquery が子要素の対応するマウスアウト イベントを防ぐ方法について
- 黄舟オリジナル
- 2017-06-28 11:43:201267ブラウズ
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 サイトの他の関連記事を参照してください。