Question

我有这样的代码：

<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）中，该复选框被激活。 我无法更改结构。

我尝试捕获该事件并阻止其传播和默认行为。什么都没有。

在所有其他浏览器中，它均正常运行：单击禁用的按钮不会执行任何操作。

Answer 1

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

await

document.querySelector('label').addEventListener('click', function(e){
  if(e.target.nodeName == 'BUTTON')
    e.preventDefault();
});

Answer 2

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


    </label>
     <button disabled="disabled">Button</button>
</li>

Answer 3

由于无法更改结构，因此可以使用JavaScript防止按钮行为。甚至是残疾人士。或者，幸运的是，使用CSS解决了该问题：pointer-events

label button[disabled] {
  pointer-events: none;
}

它为您工作吗？

注意 ：仅适用于IE11或更高版本。

带有标签的标签内的IE按钮

3 个答案: