ng-click 在父 div 也在子 div

Posted 2023-03-05

【中文标题】ng-click 在父 div 也在子 div

【英文标题】：ng-click in parent div also in child div

【发布时间】：2014-04-05 21:44:14

【问题描述】：

我有以下代码：

        <table class="table">
            <tr>
                <th>Name___</th>
            </tr>
            <tr ng-repeat="app in apps"
                ng-click="go('/editApp/' + plugin.name);">

                <td>
                    <span>app.name</span>
                </td>
                <td style="width: 100px;">
                    <i class="glyphicon glyphicon-pencil" 
                              ng-click="openPopup(app)"></i>
                </td>
            </tr>
        </table>

当我点击 OpenPopup 时，go() 方法也会触发，我该怎么做，如果我点击弹出窗口，弹出窗口就会触发？

【问题讨论】：

从tr中删除ng-click

好吧，如果你点击一个子元素，你实际上也点击了它的父元素。这称为事件传播，特别是事件冒泡

【参考方案1】：

这个执行是因为你的<td>嵌套在<tr>中，并且点击首先触发openPopup()

然后解雇go()。您可以使用$event.stopPropagation() 停止事件传播到<tr>。 试试

        <table class="table">
        <tr>
            <th>Name___</th>
        </tr>
        <tr ng-repeat="app in apps"
            ng-click="go('/editApp/' + plugin.name);">

            <td>
                <span>app.name</span>
            </td>
            <td style="width: 100px;">
                <i class="glyphicon glyphicon-pencil" 
                          ng-click="openPopup(app);$event.stopPropagation()"></i>
            </td>
        </tr>
    </table>

【讨论】：

太棒了！效果很好。