使span元素在div中可点击

Question

我有一个使用javascript的下拉列表。在我的div中，我有一个带有div文本的span元素，因为我想根据屏幕大小显示/隐藏文本。当我添加span元素时，span区域不可点击。该div中的其他部分是可点击的并显示菜单，除了具有跨度的区域。如何使跨度可点击？

这是我的代码：

<div onclick="dropDownFunction()" class="dropbtn"><span>My List &nbsp;</span> <i class="fa fa-arrow-circle-down" aria-hidden="true"></i></div>

我的代码：http://codepen.io/nfds89/pen/MyLGKR

Answer 1

改变你的行：

if (!event.target.matches('.dropbtn')) {

用这个：

if (!event.target.matches('.dropbtn, .dropbtn span, .dropbtn i')) {

我刚刚添加了“，。dropbtn span，。dropbtn i”。

Answer 2

另一种仅限CSS的解决方案是通过点击<span>和<i>

.dropbtn span,
.dropbtn i {
  pointer-events: none;
}