Question

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

codepen：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'); 
  }

});

edit：这是应该执行的代码：当我按下按钮时，js将切换一个类，名为“ off”的类的宽度为0px；显示：无等。因此，当我按下按钮时，该元素将被隐藏，而当我按下按钮时，它将再次显示。对不起，任何英语mastak

Answer 1

发生这种情况的原因是图像成为单击功能的目标-尝试禁用指针事件，它将再次起作用：）

button img { pointer-events: none; }

按钮内的图片标签使js停止在chrome上运行

1 个答案: