点击子元素时父<a>链接意外跳转，stopPropagation无效求助

嘿，我帮你定位到问题根源啦！你现在的问题主要出在两个地方：

1. AngularJS事件绑定语法错误 #

你引入的是AngularJS 1.7.5，但却用了Angular 2+的(click)事件绑定语法——这就导致你的stopPropagation()代码根本没被执行！AngularJS 1.x里得用ng-click指令来绑定点击事件才行。

2. 没阻止的默认跳转行为 #

就算你成功阻止了事件冒泡，浏览器还是会把点击子元素的操作视为点击<a>本身，照样触发跳转。这时候你需要的是阻止事件的默认行为，而不只是阻止冒泡。

修正后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!-- 别忘了加上ng-app，AngularJS才能生效 -->
<div ng-app>
  <a class="parent" href="https://www.google.com/">
    <p class="child" title="This is mobile tooltip" tabindex="0" ng-click="$event.stopPropagation(); $event.preventDefault();">Click</p>
  </a>
</div>

<style>
.parent { background-color: blue; display: inline-block; width: 400px; height: 300px; z-index: 1; }
.child { color: black; background-color: yellow; display: inline-block; width: 100px; height: 50px; z-index: 2; }
[title] { position: relative; display: inline-flex; justify-content: center; }
.child:focus::after { content: attr(title); position: absolute; top: 90%; color: #000; background-color: #fff; border: 1px solid; width: fit-content; padding: 3px; font-size: 10px; z-index: 20; }
</style>

关键细节说明 #

• ng-click替代(click)：这是AngularJS 1.x的标准写法，确保你的事件处理逻辑能被框架正确识别和执行。
• $event.preventDefault()：这才是阻止父链接跳转的核心——它会取消当前点击事件的所有默认行为，包括<a>标签的跳转动作。
• $event.stopPropagation()：如果你的父<a>元素还有其他自定义的点击事件监听器，这个方法可以阻止事件冒泡上去触发那些监听器。要是没有额外的父元素事件，只保留preventDefault()也能解决问题。

另外，一定要把内容放在带有ng-app指令的元素内部，不然AngularJS的指令都不会生效哦～

内容的提问来源于stack exchange，提问作者user14304981