Prevent click event from triggering other click elements undernethe the front element

Question

consider the following structure

<div (click)="setThing(null)">

   <table>
       <tr *ngFor="let item of items"  (click)="setThing(item)">
            <td>{{item.whatever}}</td>
            <td>{{item.whocares}}</td>
       </tr>
   </table>


  <div id="slidein" *ngIf="activeThing">
       {{ activeThing.whatver }}
  </div>
</div>

The idea here is that users should be able to click a table row to set an activeThing through a function call. While an activeThing is evaluating to true, it shows this slide in hover from the right (think like a hamburger menu slide in)

The issue here is that the click event on the row defintiely triggers, but then the click event seems to seep through and also click the background too, which is setting activeThing to null.

How do I prevent the click through?

or rather, whats the better approach to this scenario. In this situation the user is supposed to still be able to interact with other things while this pop over is visible, so I can't just have a 100%x100% faded background clickable hover. Though this way this thing behaves I'm not convinced even doing that would help

Answer 1

根据您当前的场景，$event.stopPropagation();在点击事件中调用是合适的。它的作用是。

Event 接口的 stopPropagation() 方法可防止当前事件在捕获和冒泡阶段进一步传播。

所以，父元素的点击不会被触发。下面是一个工作示例。

Stack Blitz Demo