如何从子元素中阻止父属性

Question

我有一个 div 属性为 data-toggle=collapse。此 div 包含子元素（标签 - link），我希望 a 元素不会引用 data-toogle 属性。

<div data-toggle="collapse" data-target="#someElement">
  <span>click here to collapse</span>
  <a (click)="anyFunction($event)">open new window</a>
</div>

我不希望点击某个元素会折叠面板。

我该怎么做？

Answer 1

你应该使用 stopPropagation() 。请参阅下面的示例

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$("a").on("click",function(e) {
   e.stopPropagation()

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div data-toggle="collapse" data-target="#someElement">
  <span>click here to collapse</span>
  <a>open new window</a>
</div>
<div id="someElement" class="collapse">
blabla
</div>

如何从子元素中阻止父属性

how to block attribute of parent from child element

html

angular-ui-bootstrap