![](/img/trans.png)
[英]Weird behavior when adding click event to Bootstrap dropdown-toggle
[英]Angular js stop propagation from Bootstrap “dropdown-toggle” event
我有一个Angular JS 1.3应用程序。
在其中我有一个表格行转发器与ng-click:
<tr ng-repeat-start="user in users.users" ng-click="showDetails = !showDetails">
<!-- main row, with the menu td shown below -->
<tr class="row-details" ng-show="showDetails" ng-class="{ 'active': showDetails }">
<td>this is the row that hows details</td>
</tr>
<tr ng-repeat-end></tr>
其中切换打开详细视图。 工作良好。 但是现在我需要在每个td
添加另一个项目,一个Bootstrap按钮菜单:
<td>
<div class="btn-group">
<div ng-switch on="user.status">
<button class="btn btn-link btn-gear dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-cog"></i></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-when="Inactive">
<li><a href="" ng-click="users.modals.deleteUser()">Delete</a></li>
</ul>
<ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-when="Invited">
<li><a href="" ng-click="users.toast.resendInvite()">Resend invitation</a></li>
<li><a href="" ng-click="users.modals.deleteUser()">Delete</a></li>
</ul>
<ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-default>
<li><a href="" ng-click="users.toast.sentPassword()">Reset password</a></li>
<li><a href="" ng-click="users.modals.deleteUser()">Delete</a></li>
</ul>
</div>
</div>
</td>
问题是,尝试单击此菜单按钮而不是触发行上的ng-click,切换行状态但从不打开我的菜单。 我怎么能阻止这个?
这是一个非常棘手的问题。 问题是,当您单击菜单按钮时会发生两件事:第一件事是它打开Bootstrap下拉菜单,第二件事是该事件传播到父元素并触发showDetails = !showDetails
。
显而易见的解决方案是尝试在td
级别使用$event.stopPropagation()
停止事件传播,以便事件不会冒出DOM树并且永远不会触发父ngClick
。 不幸的是,它不起作用,因为Bootstrap在document
元素上设置click事件监听器以受益于冒泡,因此您无法停止传播。
在这种情况下我提出的最简单的解决方案是在原始事件对象上设置一个标志,无论事件是否发生在菜单按钮上。 如果是这种情况, ngClick
在tr
上将不会做任何事情。
对于tr
它看起来像这样:
<tr ng-repeat-start="user in users.users" ng-click="$event.originalEvent.dropdown || (showDetails = !showDetails)">
ans button
:
<button ng-click="$event.originalEvent.dropdown = true" class="btn btn-link btn-gear dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-cog"></i>
</button>
在dfsq的答案的帮助下,我在Angular 2中解决了同样的问题。这是我的示例代码。
<td class="tablerowdata" (click)="$event.dropdown || onSelect(track)" >
<button (click)="$event.dropdown = true" type="button" class="btn btn-default dropdown-toggle trackbuttons" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.