하위 요소의 클릭 이벤트 방지
- PHPz앞으로
- 2016-05-16 19:14:541547검색
문제 설명:
오늘 페이지를 디버깅할 때 이상한 현상이 발생했습니다. 상위 요소에 클릭 이벤트가 정의되어 있고 상위 요소 아래에 li 태그가 하나씩 있습니다. 이에 대한 클릭 이벤트가 없습니다. li 태그 중 하나를 클릭하면 일부 작업이 발생하는 현상이 발생합니다.
이 문제로 인해 오랫동안 의구심이 생겼습니다. 코드를 여러 번 검토한 결과, 하위 요소를 클릭하면 상위 요소의 이벤트도 발생한다는 사실을 확인했습니다. 당시 저는 이러한 현상을 부모 요소에 클릭 이벤트를 정의하면 실제로는 이 영역에 클릭 이벤트가 정의되어 있기 때문에 자식 요소를 클릭하면 실제로는 부모 요소가 클릭되는 현상에 기인한다고 생각했습니다.
그러나 보다 과학적인 설명은 다음과 같습니다. 하위 요소를 클릭할 때 하위 요소에 클릭 이벤트가 없으면 클릭 이벤트는 클릭을 처리할 수 있는 함수가 나타날 때까지 자동으로 상위 요소에 버블링됩니다. 이벤트를 찾을 수 있습니다.
이 설명의 장점은 이러한 현상을 차단할 수 있는 방법, 즉 클릭 이벤트의 버블링을 방지할 수 있는 방법이 있다는 것입니다. jQuery의 경우 stopPropagation()입니다. 다음 코드에서는 stopPropagation이 없는 경우와 stopPropagation이 있는 경우의 차이점을 확인해 볼 수 있습니다.
코드는 다음과 같습니다.
<!DOCTYPE html><html><meta http-equiv="content-type" content="text/html;charset=utf8"><link rel="stylesheet" type="text/css" href=""><script src="./jQuery/jquery-2.1.4.js"></script><script type="text/javascript">
$(function() {
$("#mainp").click(function(event) {
if($(this).children('ul').css("display") == "none")
$(this).children('ul').css("display","block"); else
$(this).children('ul').css('display',"none");
});
//阻止向上冒泡
$("#mainp > ul").click(function(event) {
event.stopPropagation();
});
});</script><title>测试如何屏蔽子元素的事件</title><body>
<p id="mainp">
<button>click me</button>
<ul style="display:none">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</p></body></html> 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제