마우스가 하위 요소 위로 지나갈 때 발생하는 마우스 아웃 및 마우스 오버 이벤트에 대한 솔루션 element_javascript 기술
- WBOY원래의
- 2016-05-16 15:49:061401검색
달성하고 싶은 것: 마우스가 블랙 박스에 들어가면 주황색 박스가 페이드 인 애니메이션을 수행하고, 블랙 박스 범위가 이동하면(분홍색 박스를 통과하더라도 여전히 애니메이션이 실행되지 않습니다); 마우스가 밖으로 움직이면 주황색 상자가 사라집니다.
발생한 문제에 대한 설명: 검은색 상자 안으로 마우스를 이동하면 주황색 상자가 페이드인 애니메이션을 수행하지만, 검은색 상자에서 분홍색 상자로 마우스를 통과하면 주황색 상자가 사라진 후 페이드인 애니메이션이 다시 수행됩니다. 마우스가 분홍색 상자에서 검정색 상자로 이동하면 주황색 상자의 페이드인 애니메이션이 다시 실행됩니다. 이것은 내가 원하는 것이 아닙니다.
초기 코드:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<meta charset="utf-8">
<title>mouseover mouseout</title>
<style type="text/css" media="screen">
.parent{
width:200px;
height:200px;
background:black;
}
.child{
width:100px;
height:100px;
background:pink;
}
.a1{
width:40px;
height:40px;
background:orange;
display:none;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="a1"></div>
</div>
<script>
$('.parent').on('mouseover',function(e){
$('.a1').show(1000);
});
$('.parent').on('mouseout',function(e){
$('.a1').css('display','none');
});
</script>
</body>
</html>
먼저 이러한 문제가 발생하는 이유를 설명합니다.
블랙박스에서 핑크박스로 마우스가 이동하면 블랙박스의 마우스아웃이 발생하고 이벤트 버블링으로 인해 블랙박스의 마우스오버 이벤트가 즉시 발생하므로 실제로는 오렌지박스가 먼저 사라진 후 즉시 페이드인 애니메이션을 수행합니다. 이것이 우리가 보는 과정입니다.
핑크박스에서 블랙박스로 마우스가 이동하면 다시 블랙박스에서 마우스아웃이 발생합니다(마우스가 선택된 요소나 그 하위 요소를 통과해도 마우스오버 이벤트가 발생하기 때문입니다). 동시에 마우스 오버도 발생하므로 페이드인 효과를 다시 수행하는 과정이 있습니다.
방법 1: mouseover/mouseout 대신 mouseleave/mouseout 사용 [가장 좋은 방법]
먼저 mouseout&mouseover와 mouseleave&mouseenter의 사용법 차이를 살펴보겠습니다
마우스 오버 및 마우스 입력
마우스 포인터가 선택한 요소나 하위 요소를 통과할 때마다 마우스오버 이벤트가 트리거됩니다.
mouseenter 이벤트는 마우스 포인터가 요소 외부에서 선택한 요소(요소 내부)로 전달될 때만 트리거됩니다.
마우스아웃과 마우스리브
mouseout 이벤트는 마우스 포인터가 선택한 요소 또는 하위 요소를 벗어나는지 여부에 따라 트리거됩니다.
mouseleave 이벤트는 마우스 포인터가 선택한 요소 밖으로(요소 외부) 지나갈 때만 트리거됩니다.
간단한 예를 통해 둘의 차이점을 확인할 수 있습니다
그래서 개선된 코드는
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<meta charset="utf-8">
<title>mouseover mouseout</title>
<style type="text/css" media="screen">
.parent{
width:200px;
height:200px;
background:black;
}
.child{
width:100px;
height:100px;
background:pink;
}
.a1{
width:40px;
height:40px;
background:orange;
display:none;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="a1"></div>
</div>
<script>
$('.parent').on('mouseenter',function(e){
$('.a1').show(1000);
});
$('.parent').on('mouseleave',function(e){
$('.a1').css('display','none');
});
</script>
</body>
</html>
방법 2: e.stopPropagation()을 사용하여 이벤트가 더 이상 확산되는 것을 방지합니다
e.stopPropagation()은 전파 프로세스의 캡처, 대상 처리 또는 버블링 단계에서 이벤트의 추가 전파를 중지합니다. 이 메서드를 호출하면 이 노드의 이벤트 핸들러가 호출되고 이벤트는 더 이상 다른 노드로 전달되지 않습니다.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<meta charset="utf-8">
<title>mouseover mouseout</title>
<style type="text/css" media="screen">
.parent{
width:200px;
height:200px;
background:black;
}
.child{
width:100px;
height:100px;
background:pink;
}
.a1{
width:40px;
height:40px;
background:orange;
display:none;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="a1"></div>
</div>
<script>
$('.parent').on('mouseover',function(e){
$('.a1').show(1000);
});
$('.parent').on('mouseout',function(e){
$('.a1').css('display','none');
});
$('.child').on('mouseover',function(e){
e.stopPropagation();
$('.a1').css('display','block');
//这是保证动画体的末状态不变
});
$('.child').on('mouseout',function(e){
e.stopPropagation();
//防止从粉色框移出到黑色框时再次触发其他事件
})
</script>
</body>
</html>
생각의 확장:
1. 하위 요소가 너무 많으면 어떻게 해야 하나요? 각 요소를 e.stopPropagation()에 바인딩해야 하나요?
$('.parent').children()과 같은 jquery 선택기 .children()을 사용합니다. 일치하는 요소 집합에 있는 각 요소의 하위 요소를 가져옵니다.
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.