jquery가 하위 요소가 해당 mouseoutevent에서 방지하는 방법:
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. mouseout 이벤트에 대해서는 jQuery의 mouseout 이벤트 장을 참조하세요.
2.evt = window.event||e, var ev=window.event||ev의 기능은 무엇인가요? 장을 참조하세요.
3. toElement 속성에 대해서는 자바스크립트의 toElement 이벤트 속성 장을 참조하세요.
4.latedTarget 속성에 대해서는 자바스크립트의 관련Target 이벤트 속성 장을 참조하세요.
5.자바스크립트 사용법에 대한 자세한 설명에서 확인할 수 있습니다.
6.contains() 함수는 jQuery.contains() 메서드 장에서 찾을 수 있습니다.
7. hide() 함수에 대해서는 jQuery hide() 메소드 장을 참조하세요.
위 내용은 jquery가 하위 요소의 해당 mouseout 이벤트를 방지하는 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!