<!DOCTYPE html><html lang="ko"><head><meta charset="utf-8"><script src="jquery.js"></script><style>.wrapper {width: 400px;height: 400px;border: 1px solid #000;position: relative;}.box {width: 200px;height: 200px;border: 1px solid #000;position: absolute;}.box1 {top:10px;left: 10px;background: pink;}.box2 {background: gold;top:100px;left: 100px;opacity: .8;/* z-index를 무시하고 겹쳐있는 영역을 클릭했을때 box1 요소에 click 이벤트 반응하게 하기 */pointer-events: none; /* HTML 요소에 정의된 이벤트( click, hover, drag, active...등 )를 비활성화한다. */}</style></head><body><div class="wrapper"><div class="box box1">box1</div><div class="box box2">box2</div></div><script>$(".box1").click(function(event) {console.log("box1"); // 겹쳐진 영역을 클릭해도 box1요소의 이벤트가 반응한다.});</script></body></html>
반응형
'jQuery' 카테고리의 다른 글
| [jQuery][CSS][Tip] css animation restart (0) | 2016.11.04 |
|---|---|
| [jQuery] 필터 선택자 - :parent, :empty, :has, :contains (1) | 2016.10.27 |
| [jQuery] .index(this) - 선택된 요소의 index 얻기 (0) | 2016.04.12 |
| [jQuery] detach() - 노드를 떼었다. 붙였다. CTRL + X, CTRL + V (0) | 2016.03.09 |
| [jQuery] $.trim() - 문자열 앞 뒤 공백제거 (2) | 2016.03.09 |
