ng-click 부모부터 자녀까지 클릭

ng-click 부모부터 자녀까지 클릭

나는 가지고 있다<div>다른 것을 가진 원소<div>그 자식으로서의 요소.

추가했습니다.ng-click부모에게 지시하며, 자식 클릭 시 실행되지 않을 것으로 예상합니다.하지만, 그렇다.

<div class="outer" ng-click="toggle()">
    <div class="inner">You can click through me</div>
</div>

왜 이렇게 되는 거죠?어떻게 하면 피할 수 있을까요?

이 문제를 설명하는 JSFiddle은 다음과 같습니다.

이벤트 전파를 취소해야 부모 요소의 클릭 이벤트가 호출되지 않습니다.시험:

<div class="outer" ng-click="toggle()">
    <div class="inner" ng-click="$event.stopPropagation()">You can click through me</div>
</div>

하위 요소를 클릭하면 해당 이벤트가 트리거됩니다.하지만 여기서 그치지 않습니다.먼저 하위 요소의 클릭 이벤트가 트리거되고 다음으로 상위 요소의 클릭 이벤트가 트리거되는 등 계속됩니다.이를 이벤트 전파라고 합니다. 이벤트 전파(부모 클릭 이벤트 트리거)를 중지하려면 위의 함수를 사용해야 합니다.stopPropagation.

---

작업 예

CSS 패딩을 추가했기 때문에 예가 더 명확합니다.패딩을 하지 않으면 하위 요소가 전체 내부 공간을 차지하므로 하위 요소를 클릭하지 않고 상위 요소를 클릭할 수 없습니다.

부모 및 자녀에 대해 다른 함수를 설정할 경우 $event를 자녀 함수의 파라미터로 전송하고 그 안에 stopPropagation을 설정할 수 있습니다.다음과 같이 합니다.

<div class="outer" ng-click="onParentClick()">
    <div class="inner" ng-click="onChildClick($event)">You can click through me</div>
</div>

컨트롤러에서 다음을 수행합니다.

function onChildClick(event){
    event.stopPropagation();
    //do stuff here...
}
function onParentClick(){
    //do stuff here..
}

언급URL : https://stackoverflow.com/questions/28010244/ng-click-on-parent-clicks-through-children