使 div 内的 span 元素可点击答案

【问题标题】：Make the span element inside div clickable使 div 内的 span 元素可点击
【发布时间】：2016-09-03 18:04:57
【问题描述】：

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

这是我的代码：

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

【问题讨论】：

【解决方案1】：

换行：

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

用这个：

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

我刚刚添加了“, .dropbtn span, .dropbtn i”。

【讨论】：

【解决方案2】：

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

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

【讨论】：