반응형
하위 요소 클릭 이벤트 부모 클릭 이벤트 트리거
이런 코드가 있다고 치자.
<html>
<head>
</head>
<body>
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');">
</div>
</div>
</body>
</html>나는 그것을 촉발시키고 싶지 않습니다.parentDiv클릭할 때 이벤트를 클릭합니다.childDiv, 이거 어떻게 해요?
업데이트됨
또한 이 두 종목의 실행 순서는 무엇입니까?
event.stopPropagation()을 사용해야 합니다.
$('#childDiv').click(function(event){
event.stopPropagation();
alert(event.target.id);
});
설명:이벤트가 DOM 트리에 버블링되지 않도록 하여 부모 핸들러가 이벤트를 알리지 않도록 합니다.
jQuery 미포함 : DEMO
<div id="parentDiv" onclick="alert('parentDiv');">
<div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
AAA
</div>
</div>
저는 같은 문제에 직면했고 이 방법으로 해결했습니다.html :
<div id="parentDiv">
<div id="childDiv">
AAA
</div>
BBBB
</div>
JS:
$(document).ready(function(){
$("#parentDiv").click(function(e){
if(e.target.id=="childDiv"){
childEvent();
} else {
parentEvent();
}
});
});
function childEvent(){
alert("child event");
}
function parentEvent(){
alert("paren event");
}
그stopPropagation()method는 부모 요소에 대한 이벤트 버블링을 중지하여 부모 핸들러가 이벤트를 알리지 못하도록 합니다.
방법을 사용하시면 됩니다.event.isPropagationStopped()이 메서드가 호출된 적이 있는지 여부를 확인합니다(해당 이벤트 개체에서 확인합니다.
구문:
이 메서드를 사용하는 간단한 구문은 다음과 같습니다.
event.stopPropagation()
예:
$("div").click(function(event) {
alert("This is : " + $(this).prop('id'));
// Comment the following to see the difference
event.stopPropagation();
});
이벤트 버블을 클릭하십시오. 버블링의 의미는 여기에 있습니다. 시작하기 좋은 포인트가 있습니다.사용가능event.stopPropagation(), 그 사건이 더 널리 퍼지기를 원치 않으신다면요
또한 MDN에서 참고할 수 있는 좋은 링크
언급URL : https://stackoverflow.com/questions/13966734/child-element-click-event-trigger-the-parent-click-event
반응형
'programing' 카테고리의 다른 글
| 특정 앨범의 이미지를 통해 Wordpress NextGEN 루프 실행 (0) | 2023.09.13 |
|---|---|
| ImportError: Django 4.0으로 업그레이드한 후 'django.conf.urls'에서 'url' 이름을 가져올 수 없습니다. (0) | 2023.09.13 |
| Node.js와 함께 사용하기에 가장 좋은 테스트 프레임워크는 무엇입니까? (0) | 2023.09.13 |
| ONOS 웹 응용 프로그램을 MariaDB.ClassNotFoundException에 연결하는 중 (0) | 2023.09.13 |
| node.js에서 shell 명령을 실행하여 출력을 가져옵니다. (0) | 2023.09.13 |