时间戳

首页 > 解决方案 > 带有复选框的标签内的 IE 按钮

javascript - 带有复选框的标签内的 IE 按钮

问题描述

我有这样的代码：

<li>
    <input type="checkbox" id="f6c9677c-309c-446c-9f78-757467ec7adc">
    <label for="f6c9677c-309c-446c-9f78-757467ec7adc">
        <span> Testigos de la Valoracion </span>
        <button disabled>Button</button>
    </label>
</li>

问题是该按钮被禁用，并且在 IE（v11，最新）中，当我单击它时，复选框被激活。我不能改变结构。

我已经尝试捕获事件并阻止它传播和默认行为。没有任何效果。

在所有其他浏览器中，它都可以正常工作：单击禁用的按钮什么也不做。

标签： javascripthtmlinternet-explorerbuttonlabel

解决方案

如果目标是按钮，一种可能的解决方法可能是阻止默认事件：

document.querySelector('label').addEventListener('click', function(e){
  if(e.target.nodeName == 'BUTTON')
    e.preventDefault();
});
<li>
  <input type="checkbox" id="f6c9677c-309c-446c-9f78-757467ec7adc">
  <label for="f6c9677c-309c-446c-9f78-757467ec7adc">
    <span> Testigos de la Valoracion </span>
    <button disabled>Button</button>
  </label>
</li>

推荐阅读