하위 요소 클릭 이벤트가 상위 클릭 이벤트를 트리거합니다.
다음과 같은 코드가 있다고 가정합니다.
<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()메서드는 부모 요소에 대한 이벤트 버블 링을 중지하여 부모 처리기에서 이벤트 알림을받지 못하도록합니다.
메서드 event.isPropagationStopped()를 사용 하여이 메서드가 해당 이벤트 개체에서 호출되었는지 여부를 알 수 있습니다 .
Syntax:
Here is the simple syntax to use this method:
event.stopPropagation()
Example:
$("div").click(function(event) {
alert("This is : " + $(this).prop('id'));
// Comment the following to see the difference
event.stopPropagation();
});
Click event Bubbles, now what is meant by bubbling, a good point to starts is here. you can use event.stopPropagation(), if you don't want that event should propagate further.
Also a good link to refer on MDN
ReferenceURL : https://stackoverflow.com/questions/13966734/child-element-click-event-trigger-the-parent-click-event
'development' 카테고리의 다른 글
| TeamCity Nuget Feed에서 특정 버전의 패키지를 제거하는 방법은 무엇입니까? (0) | 2020.12.29 |
|---|---|
| CDI : beans.xml, 어디에 두어야합니까? (0) | 2020.12.29 |
| 프로젝트에 대해 OutputPath 속성이 설정되지 않았습니다. (0) | 2020.12.29 |
| numpy 배열에서 모드를 찾는 가장 효율적인 방법 (0) | 2020.12.29 |
| WPF TextBlock과 TextBox간에 차이점이 있습니까? (0) | 2020.12.29 |