자바스크립트 이벤트 버블링을 피하는 하나의 방법
https://tk2rush90.blog.me/221092659287 참조
버블링과 캡처링, 그리고 메모리 관계
--------------------------------------------------------------------------------------------------
아래 그림과 같이..
함수(funcA 라 하자)가 씌워진 태그(tagA 라 하자) 카드별칭 위에
또 다른 함수(funcB)가 씌워진 다른 태그(tagB 라 하자) 삭제 버튼이 올려진 상태에서..
삭제 버튼이 아닌 카드별칭 전체 영역에서는 funcA 가 실행되고,
삭제 버튼에서만 funcB 가 실행되게 하려면..
자바스크립트 버블링 현상과 맞닥뜨리게 된다.
이를 해결하려면, 자바스크립트 이벤트 중에 버블링이 적용되지 않는..
mouseenter 와 mouseleave 를 적절히 버무려 주면 된다.
크드는 아래와 같다.
<!doctype html>
<html lang="ko">
<head>
<style>
#cardList {background:yellow; padding:10px; width:700px; height:170px}
#cardList li {width:200px;height:150px; background:cyan;margin:10px;float:left; cursor:pointer}
#cardList li p{width:40px; margin:30px auto 0 auto; background:white}
</style>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<ul id="cardList">
<li onclick="selectCard('ORDER_201806141528962461189','536618180614BA727451')">
<div>카드별칭_타이틀<br>
<span>카드별칭_명칭</span>
</div>
<p onclick="deleteCard('ORDER_201806141528962461189')">삭제</p>
</li>
<li>
<div>+</div>
<p>카드추가</p>
</li>
</ul>
<script>
var clickLevel = 0;
$(document).ready(function(){
$('#cardList li').on('mouseenter',function(){
clickLevel = 1; // 카드별칭 li 박스 안
}).on('mouseleave',function(){
clickLevel = 0; // 카드별칭 li 박스 밖으로 나가는 경우
});
$('#cardList li p').on('mouseenter',function(){
clickLevel = 2; // 카드별칭 li 박스 안의 삭제 버튼 위인 경우
}).on('mouseleave',function(){
clickLevel = 1; // 카드별칭 li 박스 안(삭제 버튼 밖)
});
});
function selectCard(a,b){
if(clickLevel==1) alert('선택');
}
function deleteCard(a){
if(clickLevel==2) alert('삭제');
}
</script>
</body>
</html>