Если на ярлыке имеется только кнопка, нажатие кнопки не позволяет (полностью?) Запускать метку

У меня есть два input типа radio. Для каждого input существует корреспондирование label с одним button внутри.

Я ожидал, что нажатие кнопки будет иметь тот же эффект, что и щелчок на ярлыке: чтобы соответствующий вход был проверен.

Однако этого не происходит. Как показано в следующем фрагменте, зависание и нажатие кнопок вызывает соответствующие изменения стиля в переключателях, но действие щелчка не выбирает вход, даже если простые ярлыки работают как ожидалось.

Я проверил, что button являются законными детьми label s. Ярлыки позволяют разглашать содержание, а кнопки Разглашение содержимого, поэтому там все должно быть хорошо.

Я также попытался добавить прослушиватель событий к событиям щелчков обеих кнопок и внутри них, вызывающим event.preventDefault(), чтобы убедиться, что поведение кнопки по умолчанию не препятствовало событию от пузырьков до метки, но безрезультатно, метка получает событие.

Так как это похоже на совместимость между браузерами (протестировано на Firefox 41a и Opera 31b/Chrome 44):

  • Что происходит здесь, что мне не хватает?
  • Как я могу реализовать это без обмана (например, стилю ярлыка, как если бы это была кнопка)?

<div>
  <input type="radio" name="A" id="one" />
  <label for="one">One</label>
  <label for="one">
    <button type="button">One</button>
  </label>

  <input type="radio" name="A" id="two" />
  <label for="two">Two</label>
  <label for="two">
    <button type="button">Two</button>
  </label>
</div>

ОТВЕТЫ

Ответ 1

  • A label может быть связан только с одним элементом управления за один раз. Об этом свидетельствует тот факт, что атрибут for указывает на элемент с соответствующим атрибутом идентификатора.

    У вас есть button, являющийся потомком вашего label; ожидаемая интерпретация этого заключается в том, что label служит в качестве метки для button. Однако вы пытаетесь связать переключатель, а не элемент button, с label. Настоящая проблема заключается в том, что существует конфликт между элементами управления формой и label; он не может определить, с каким контролем он должен быть связан.

    Я предполагаю, что тот факт, что переключатель не работает правильно, является побочным эффектом этого. Возможно, это до некоторого активационного поведения как в переключателе, так и в элементе button.

    Я проверил, что button являются законными детьми label s. Ярлыки разрешают содержание фразы, а кнопки - это фразы, поэтому все должно быть в порядке.

    Валидатор, тем не менее, производит следующую ошибку с вашей разметкой:

    Ошибка. Любой потомок button элемента label с атрибутом for должен иметь значение ID, соответствующее этому атрибуту for.

    Это связано с тем, что элемент label с атрибутом for должен иметь элемент управления формой с этим значением идентификатора для атрибута for, на который указывает, даже если этот элемент управления является потомком самого label, Но вы не можете назначить один и тот же идентификатор более чем одному элементу. Результатом является вышеупомянутый конфликт.

  • Не зная, чего вы пытаетесь сделать здесь, лучший совет, который я могу дать, если вы просто хотите, чтобы label имел вид кнопки, должен просто нарисовать ее как таковой.