Кнопка 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, последняя версия), когда я нажимаю на нее, флажок активируется. Я не могу изменить структуру.
Я попытался зафиксировать событие и предотвратить его распространение и поведение по умолчанию. Ничего не работает.
Во всех остальных браузерах он работает нормально: нажатие на отключенную кнопку ничего не делает.
Не совсем. Но я не могу это изменить: S В других браузерах работает хорошо
Что ж, чтобы исправить это просто, вам нужно всего лишь сделать disabled = "disabled" в этом элементе <button>.
это не работает. Уже пробовал
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
<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>
Я не могу изменить структуру
Но в чем причина использования кнопки внутри блока меток?
Если возможно, вы можете использовать div вместо label. Это также решит вашу проблему: |
Хм. Не мой код. Но это из-за библиотеки, в которой есть getTitle (), и она помещает все внутри метки. Кто-то добавил туда кнопку.
Но проблема в том, что ярлык для флажка. Итак, в IE его мыслящий весь блок с меткой как единый блок, и всякий раз, когда он нажимает кнопку, он считает, что он ставит флажок: / .IE Самый умный браузер, который вы знаете: P
Я знаю логику того, что думает IE. Но, похоже, никто так не думает: P
Поскольку вы не можете изменить структуру, вы можете использовать JavaScript для предотвращения поведения кнопок. Даже инвалиды. Или - к счастью - используйте CSS, чтобы обойти это: pointer-events
label button[disabled] {
pointer-events: none;
}
Он работает за вас?
Примечание: работает только для IE11 или выше.
Одним из возможных способов решения проблемы может быть предотвращение события по умолчанию, если целью является кнопка:
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>Не сработало точно, так как nodeName иногда было "LABEL", но идея предотвращения событий при нажатии на ярлык была тем, что мне помогло. Спасибо
@SergioTx, добро пожаловать .... вы правы, поэтому IE нас (разработчика) не любит .......
Есть ли причина иметь кнопку в элементе
<label>? (Я знаю, что вы не можете изменить структуру)