本机 Javascript 单击事件不适用于按钮中的图标

Posted 2023-03-07

【中文标题】本机 Javascript 单击事件不适用于按钮中的图标

【英文标题】：Native Javascript click event not working on icon in button

【发布时间】：2022-01-17 10:46:10

【问题描述】：

我的html + Tailwindcss 页面中有一个按钮，如下所示：

<div class="fixed bottom-4 right-4 z-10">

    <button
        id="button-fab-anchor"
        class="z-50 whitespace-nowrap flex items-center px-3.5 py-2 rounded-full shadow-xl
           outline-none focus:outline-none border-t border-b border-transparent
           combo-primary hover:bg-primary-contrast active:bg-primary-contrast"
    >
        <span class="z-40 icon-inverse-primary text-lg text-center">
            <i id="up-icon" class="fal fa-chevron-up"></i>
            <i id="down-icon" class="fal fa-chevron-down hidden"></i>
        </span>

    </button>

    <ul id="button-fab-list" class="absolute bottom-full right-0 flex flex-col justify-end hidden">
        <li> Buttons here... </li>
    </ul>

</div>

在页面上我有以下JS：

document.addEventListener("DOMContentLoaded", function(event) 

    const btnAnchor = document.getElementById('button-fab-anchor');

    if (btnAnchor) 

        const btnList = document.getElementById("button-fab-list");
        const upIcon = document.getElementById("up-icon");
        const downIcon = document.getElementById("down-icon");

        btnAnchor.addEventListener("click",  function(event) 
            if (event.target == btnAnchor) 
                btnList.classList.toggle('hidden');
                upIcon.classList.toggle('hidden');
                downIcon.classList.toggle('hidden');
            
        );

    

);

如果我点击按钮而不是按钮中的图标，这会很好。我尝试使用z-index 将按钮父级放置在z-50 并将图标设置为z-10，因此父级堆叠在子级上方。

我想念什么/如何设置事件以在按钮父级及其所有子级（即：图标）上工作？

【参考方案1】：

在您的addEventListener 中，您有一个if 条件来检查目标是否为btnAnchor（即#button-fab-anchor）。因此，如果事件目标是图标，if 条件将不会是 true。

btnAnchor.addEventListener("click",  function(event) 
            if (event.target == btnAnchor) 
                btnList.classList.toggle('hidden');
                upIcon.classList.toggle('hidden');
                downIcon.classList.toggle('hidden');
            else
                //CLicked on something else. 
            
        );

【参考方案2】：

将pointer-events: none; 用于按钮内的span。 因为它是tailwindcss（在span 上使用：pointer-events-none）你有：

<button id="button-fab-anchor" class="...">
  <span class="... pointer-events-none">
    <i id="up-icon" class="fal fa-chevron-up"></i>
    <i id="down-icon" class="fal fa-chevron-down hidden"></i>
  </span>
</button>

【参考方案3】：

在您的代码中，if 条件是if (event.target == btnAnchor)。

点击图标时目标对象是图标而不是按钮，所以js核心既不进入块，也不执行该动作：

btnList.classList.toggle('hidden');
upIcon.classList.toggle('hidden');
downIcon.classList.toggle('hidden');