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

Question

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

                    <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 内的文本时它会起作用，但不会在整个矩形上单击，这正是我真正想要的。

Answer 1

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

instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead. MDN web docs

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

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

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

Answer 2

问题是另一块 html 覆盖了那部分字段。删除它后，它起作用了！

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

Angular doesn't fire off (click) event on part of the div that is blank

angular

hover

click

partial