div内のspan要素をクリック可能にする

Question

javascriptを使用したドロップダウンリストがあります。私のdiv内には、画面サイズに応じてテキストを表示/非表示にしたいので、divのテキストにspan要素があります。スパン要素を追加すると、スパン領域はクリックできません。そのdiv内の他の部分はクリック可能で、スパンのある領域を除いてメニューが表示されます。スパンをクリック可能にする方法は？

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

そして、私のcodepen：http://codepen.io/nfds89/pen/MyLGKR

Answer 1

代替CSSのみのソリューションは<span>と<i>

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

Answer 2

変更するには、行：これで

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

：

は、ここに私のコードです私はちょうど追加

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

」、 .dr opbtn span、.dropbtn i "となります。あなたがすべてで `window.onclick`を必要とする理由