如何在不注册其后面的框的单击事件的情况下单击一个html框？

Posted 2023-03-13

【中文标题】如何在不注册其后面的框的单击事件的情况下单击一个html框？

【英文标题】：How to click an html box without registering the click event of the box behind it?

【发布时间】：2022-01-08 16:44:40

【问题描述】：

我有一个盒子放在另一个盒子的顶部，两个盒子都有自己单独的点击事件。上面的盒子是蓝色的，后面的盒子是红色的。每当我点击蓝色框时，红色框的点击事件也会注册。这是代码。也请不要使用 event.preventDefault(); event.stopPropagation();如果你的回答是因为它过去给我带来了麻烦。

box1() 
  console.log("box 1");   

box2() 
  console.log("box 2");

.box1
    left : 100px;
    top: 100px;
    width: 400px;
    height: 400px;
    background-color: red;


.box2
    position: relative;
    left : 100px;
    top: 100px;
    width: 400px;
    height: 400px;
    background-color:blue;

<div class="container">
    <div class="box1" (click)="box1()">
        <div class="box2" (click)="box2()">
        </div>
    </div>
</div>

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

感谢@AldinBradaric 的回答。但是，我在使用这种方法时遇到了问题。我已附上与此问题相关的文章。css-tricks.com/dangers-stopping-event-propagation

有什么特别的问题吗？正如文章所述，跟踪您在哪里使用 stopPropagation 很重要，但在您的特定用例中，我不明白为什么它不起作用。

这是我在我正在工作的问题中发布的一个示例问题，当我在某些事件中使用 stopPropagation 时，它没有得到我想要的数据。

您也许可以尝试将点击事件重新分配给不同的 html 组件，例如纽扣。无论如何，如果您发布更详细的代码，将更容易分析您的问题。

【参考方案1】：

我已经查看了您的代码，并稍微更改了您的 css 和 html，它就像一个魅力。

box.html

<div class="container">
   <div class="box1" (click)="box1()"></div>
   <div class="box2" (click)="box2()"></div>
</div>

box.css

.box1 
  position: fixed;
  left: 100px;
  top: 100px;
  width: 400px;
  height: 400px;
  background-color: red;
  z-index: 0;

.box2 
  position: fixed;
  left: 200px;
  top: 200px;
  width: 400px;
  height: 400px;
  background-color: blue;
  z-index: 999;

.container 
  position: relative;
  left: 100px;
  top: 100px;

box.ts

 box1() 
    console.log("box 1");   
  
  box2() 
    console.log("box 2");
  

工作演示：https://stackblitz.com/edit/angular-ivy-rxyqcd?file=src/app/app.component.ts