Question

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

                    <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>

代码只是alert("hi");方法内部的graphItemClicked()。正如我所说，当我在div中单击文本而不是在整个矩形上单击时，这是我真正想要的。

Answer 1

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

指示鼠标事件“遍历”元素并定位到该元素“之下”的内容。 MDN web docs

这适用于它下面的DOM树中的所有元素。

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

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

Answer 2

问题在于，另一段html覆盖了该部分内容。删除它，它就可以了！

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

2 个答案: