Angular中如何区分<li>元素与其内部按钮的点击事件？

这是事件冒泡导致的问题——DOM中点击子元素（按钮）时，事件会向上传递到父元素（li），所以同时触发了按钮的操作和li的弹窗。

解决方法有两种，核心都是阻止按钮的点击事件向上冒泡：

方法1：在按钮点击事件中调用$event.stopPropagation() #

直接在按钮的(click)事件里添加阻止冒泡的代码，点击按钮时只会执行自身操作，不会触发父元素li的onSelect：

<button class="smallButton" type="button" (click)="onStartChannel(channel); $event.stopPropagation()">
  <span class="smallButtonName">Start</span>
</button>

其他操作按钮（Stop/Delete/Copy）同理，都在(click)事件末尾加上; $event.stopPropagation()即可。

方法2：使用Angular的事件修饰符stop #

Angular提供了简化的事件修饰符，(click.stop)会自动阻止事件冒泡，写法更简洁：

<button class="smallButton" type="button" (click.stop)="onStartChannel(channel)">
  <span class="smallButtonName">Start</span>
</button>

将这个修饰符应用到所有操作按钮上，就能实现需求。

两种方法都能解决问题，推荐第二种，更符合Angular的语法风格。

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