使用引导模式防止父 onclick 事件从子元素传播

Question

我正在使用 angularjs + bootstrap 并在不同的 html 元素中嵌套了 onclick 事件（使用 angular 的 ng-click），首先在表的标题上显示不同的排序图标并在单击标题时运行排序逻辑，另一个在同一标题中的锚元素（图标）内打开模态并调用一些函数，如下面的代码所示......

问题是我正在使用引导的数据切换和数据目标属性在锚点上打开一个模式......我只需要运行锚点的函数并在锚点的 onclick 事件上打开模式，但由于锚点在父标头内，因此标头的 onclick 也被传播......我尝试在锚元素的 ng 单击上$event.stopPropagation，但如果我这样做，模态不会出现，可能是因为我正在使用引导的数据切换和数据目标属性来打开模态...有什么解决方法可以达到我的目标 - 只是打开模式 + 调用锚点的 onclick 事件？

任何帮助将不胜感激。

<th class="col-md-3"
    ng-click="sort.predicate = 'endDate'; sort.reverse=!sort.reverse;">
    End Date
  <a class="pull-right" data-toggle="modal" data-target="#GroupsModal"
     ng-click="$broadcast('someEvent');">
    <span class="fa fa-plus fa-lg"></span>
  </a>
  <span id="sortup_endDate" class="pull-right"
       ng-hide="sort.predicate != 'endDate' || sort.reverse">
    <img src="...../img/asc.gif" alt="" />
  </span>
  <span id="sortdown_endDate" class="pull-right"
      ng-hide="sort.predicate != 'endDate' || !sort.reverse">
      <img src="...../img/desc.gif" alt="" />
  </span>
</th>

Answer 1

您是否尝试过更改图标的 z 索引？

这是一个示例，因此不要在应用中使用内联 CSS。

<th class="col-md-3"
    ng-click="sort.predicate = 'endDate'; sort.reverse=!sort.reverse;">
    End Date
  <a class="pull-right" data-toggle="modal" data-target="#GroupsModal"
     ng-click="$broadcast('someEvent');"
     style="z-index: 1;">
    <span class="fa fa-plus fa-lg"></span>
  </a>
  <span id="sortup_endDate" class="pull-right"
       ng-hide="sort.predicate != 'endDate' || sort.reverse">
    <img src="...../img/asc.gif" alt="" />
  </span>
  <span id="sortdown_endDate" class="pull-right"
      ng-hide="sort.predicate != 'endDate' || !sort.reverse">
      <img src="...../img/desc.gif" alt="" />
  </span>
</th>

Answer 2

前

几天我在工作中遇到了类似的问题。

在

引导模式（https://github.com/twbs/bootstrap/blob/master/js/modal.js#L320）的源头战利品。作者在document上使用on，这是有道理的。但是，如果在绑定在 document 以下的任何元素上的事件处理程序上调用 $event.stopPropagation，它将阻止委托处理程序触发，因此模态不会显示。

一个简单的解决方案是不使用 Bootstrap 的数据属性 api，而是创建一个指令来手动打开模态：

myApp.directive('modal', function() {
  return {
    link: function(scope, element, attr) {
      element.click(function(e) {
        e.stopPropagation();
        $(attr.modal).modal();
      });
    }
  };
});

并更新 html：

<a class="pull-right" modal="#GroupsModal" ng-click="$broadcast('someEvent');">
  <span class="fa fa-plus fa-lg"></span>
</a>

这是一个简化的jsfiddle，演示了不起作用的情况。 http://jsfiddle.net/gL3gaeL3/

然后是工作案例。http://jsfiddle.net/gL3gaeL3/2/

希望这有帮助。