javascript - 按钮内的图像标记使 js 停止在 chrome 上工作

Question

我正在尝试制作一个带有图像的按钮，该图像将切换 div 的类，但是，当我在按钮内使用标签图像时，js 将不起作用。这只发生在 chrome 上，相同的代码在 firefox 上正常工作。有什么解决办法吗？

代码笔:https://codepen.io/luansergiomattos/pen/zydWyM

html:

<div class="bar" style="background-color: #474973; ">
  <br />

  <button id="searchButton">
    <img
      src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png"
      alt=""
      style="width: 20px;"
    />
  </button>
</div>

<div class="bar off but" id="search" style="background-color: #9CEAEF">
  <form action="#">
    <input
      type="text"
      placeholder="Search.."
      name="search"
      class="header__search"
    />
  </form>
</div>

js:

var focused = document.querySelector('.header__search'), searchWrapper = document.querySelector('#search'),       
searchInput = document.querySelector('#searchButton'); 

document.addEventListener('click', function (e) {
  if (~e.target.className.indexOf('header__search')) { 
    searchWrapper.classList.remove('off'); 
    focused.focus(); 
  } else if (~e.target.id.indexOf('searchButton')) { 
    searchWrapper.classList.toggle('off'); 
    focused.focus(); 
  } else { 
    searchWrapper.classList.add('off'); 
  }

});

编辑:这就是代码应该做的:当我按下按钮时，js 将切换一个类，名为“off”的类的宽度为:0px；显示:无等。所以当我按下按钮时该元素将被隐藏，当我按下按钮时它会再次出现。抱歉任何英文错误

Answer 1

发生这种情况的原因是图像成为您点击功能中的目标 - 尝试禁用指针事件，它会再次起作用:)

button img { pointer-events: none; }