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>
'Local Oriented > HTML CSS JS' 카테고리의 다른 글
| li 태그 안의 텍스트를 td 태그의 align="center" 속성 처럼 가운데 중앙 정렬하는 방법 (3) | 2019.05.06 |
|---|---|
| iOS 에서 'tel:전화번호' 가 작동하지 않으면? (0) | 2019.01.04 |
| 크롬에서 안전하지 않음 나오는 이유와 해결방법 (3) | 2018.05.30 |
| onblur 이벤트 사용시 유의 (0) | 2018.05.08 |
| iOS meta 에 넣어야 할 내용, 휴대폰/이메일 (0) | 2018.04.05 |