在父div上的角度单击不会触发所有子div

我在父DIV上调用了函数的ng-click事件。我希望只有在单击父部分时触发此事件，而不是在单击了子部分时触发。因此，如果在父级内部点击的区域覆盖子div，则不应触发事件。现在，点击div2触发事件。在父div上的角度单击不会触发所有子div

我的例子是here on code pen

HTML结构：

<div id="div1" class="div1" ng-app="appModule" ng-controller="appController" ng-click="test();"> 
    <div id="div2" class="div2"> 
    </div> 
</div>

有DIV1（父DIV）和DIV2这个div（孩子的div）内。我已经在父级div上点击了，因为我需要在父级上任何地方触发它，只在div2上触发。如何实现这一点角？

来源

2016-07-26 FrenkyB

这是JavaScript的事件冒泡的问题。 –

在子元素上添加点击侦听器，并使用stopPropogation停止事件冒泡。 –

您可以检查target元素和currentTarget是相同

HTML

<div id="div1" class="div1" ng-app="appModule" ng-controller="appController" ng-click="test($event);"> // Passing event object 
    // Rest of code 
</div>

$scope.test = function(e) { 
    if (e.target == e.currentTarget) { // checking if target and currentTarget is same 
    alert("test!"); 
    } else { 
    //Rest of code 

    }

来源

2016-07-26 07:51:59 brk

您可以使用$event.target来验证哪个元素被点击。然后执行操作。在此例中，我已经使用id财产

<div id="div1" class="div1" ng-app="appModule" ng-controller="appController" ng-click="test($event);"> 
    <div id="div2" class="div2"> 
    </div> 
</div>

脚本

$scope.test = function(event) { 
    if (event.target.id == 'div1') { 
     alert("test!"); 
    } 
}

DEMO

来源

2016-07-26 07:49:07 Satpal

可以使用NG点击= “$ event.stopPropagation（）” 来实现这一目标。如果你这样做，即使你点击一个子元素，事件也不会传播到父元素。

<div id="div1" class="div1" ng-app="appModule" ng-controller="appController" ng-click="test();"> 
<div id="div2" ng-click="$event.stopPropagation()" class="div2"> 
    </div> 
</div>

来源

2016-07-26 07:49:57

在父div上的角度单击不会触发所有子div

回答

相关问题