jquery가 하위 요소의 해당 mouseout 이벤트를 방지하는 방법에 대해
- 黄舟원래의
- 2017-06-28 11:43:201309검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!