Angular 不会在空白的部分 div 上触发（单击）事件答案

【问题标题】：Angular doesn't fire off (click) event on part of the div that is blankAngular 不会在空白的部分 div 上触发（单击）事件
【发布时间】：2018-09-11 14:38:13
【问题描述】：

我有一个两行的 div，第二行的一部分较短。但是我希望 div 的整个矩形都是 CLICKABLE 的，就像它现在是 HOVERABLE 一样。我该怎么做呢？看起来角度完全忽略了对空白区域的点击，但承认将鼠标悬停在整个区域上。奇怪的。有什么建议吗？提前致谢！这是模板：

                    <div class="graphItemTitle" (dblclick)="graphItemDoubleClicked(gs)" (click)="graphItemClicked(gs)">
                        <span class='ds-time-dimension'>{{gs.data.time_dimension_name}}</span> <span class='ds-title'>{{gs.data.title}}</span> <br>
                        <span [innerHTML]="gs.data.datasets[0].label | lf2br | safeHtml"></span>
                    </div>

而代码只是graphItemClicked() 方法中的alert("hi");。正如我所说，当我单击 div 中的文本时它可以工作，但不是整个矩形，这正是我真正想要的。

【问题讨论】：

你能提供一个stackblitz的例子吗？
你能添加一些代码吗？？
更新了模板和方法。它只是一个普通的（点击）处理程序。
您能否提供Minimal, Complete, and Verifiable example，删除与您的问题无关的所有内容？
@DanielHabenicht 通常你认为与你的问题无关，实际上是问题，所以我认为我不应该删除太多。

标签： angular hover click partial

【解决方案1】：

如果使用了 CSS 属性 pointer-events: none

指示鼠标事件“穿过”元素并以该元素“下方”的任何内容为目标。 MDN web docs

这适用于 DOM 树中位于其下方的所有元素。

解决方案是放弃使用pointer-events: none，并更细化(click) 事件绑定或绑定到上面的元素。

最小复制：https://stackblitz.com/edit/angular-nserht

【讨论】：

【解决方案2】：

问题是另一段 html 覆盖了该领域的这一部分。删除后，它起作用了！

【讨论】：