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

【问题标题】：Prevent parent onclick event propagation from child element with bootstrap modal使用引导模式防止从子元素传播父 onclick 事件
【发布时间】：2015-04-01 23:34:03
【问题描述】：

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

问题是我正在使用引导程序的 data-toggle 和 data-target 属性在锚点上打开模态...我只需要运行锚点的功能并在锚点的 onclick 上打开模态事件，但由于锚点位于父标头内，因此标头的 onclick 也正在传播....我在锚元素的 ng-click 上尝试了 $event.stopPropagation 但如果我这样做，模式可能不会出现我正在使用引导程序的 data-toggle 和 data-target 属性来打开模态...有哪些解决方法可以实现我的目标 - 只是打开模态 + 调用锚点的 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>

【问题讨论】：

酷，我在使用普通的 Bootstrap 和 JQuery 时遇到了这个问题。通过手动弹出模态并返回 false 来修复它。 $('.grid-email').click(function() { $('#emailModal').modal('show'); return false; }); 我什至不必删除 data-toggle 和 data-target。 z-index 已设置为 1。

标签： javascript html angularjs twitter-bootstrap dom

【解决方案1】：

您是否尝试过更改图标的 z-index？

这是一个示例，因此请不要在您的应用中使用内联 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>

【讨论】：

感谢您的建议，我尝试了您的建议，但没有成功；(
啊，我明白了你对建议的尝试——我不是想从 CSS 样式的角度修改它们的显示顺序（它们没有重叠，也不需要）但是为了防止父标题的 ng-click 事件在子锚元素的时候被调用，并且还使用 data-target 属性打开引导模式...

【解决方案2】：

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

在 Bootstrap Modal (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/

希望这会有所帮助。

【讨论】：