div в метке не будет отмечать флажок - PullRequest
Новая
       24

div в метке не будет отмечать флажок

0 голосов
/ 07 мая 2020

Возможно ли с этим HTML, чтобы тег DIV не отмечал флажок ввода при нажатии на тег DIV? Есть ли какие-нибудь CSS, которые я могу добавить, чтобы это стало возможным? 

<style>
#myId ~ label {
    position: fixed;
     overflow: auto;

     top: 0;
     left: 0;

    height: 100%;
     width: 100%;



    background-color: red;
}

#myId ~ label div {
    width: 100%;

    background-color: yellow;

    height: 25%;
}

#myId:checked ~ label {
    display: none;
}
</style> 

<input id="myId" type="checkbox" />
<label for="myId">
    <div>Hello</div>
</label>

1 Ответ

0 голосов
/ 07 мая 2020

Это фактически элемент <label>, вызывающий проблему; HTML связан так, что когда вы указываете атрибут for на этикетке, он связывает его с элементом <input> с соответствующим атрибутом name или id. Поэтому, когда вы нажимаете на метку , флажок меняется. Это функция браузера по умолчанию. Вы можете удалить элемент <label> вокруг <div> или, если вы хотите использовать css, вы можете сделать:

Вариант 1 

label {
  pointer-events: none;
}

Вариант 2

Или, если вы не хотите отменять функцию щелчка для всех ярлыков, вы можете сделать: 

label > div {
  pointer-events: none !important; /* disable from div */
}
label {
  pointer-events: auto; /* enable only on label */
}

Вариант 3

Если вы хотите настроить таргетинг просто этот ярлык, вы можете сделать: 

label[for=myId] {
  pointer-events: none;
}

Вариант 4

Или 

label[for=myId] > div {
  pointer-events: none !important; /* disable for div */
}
label[for=myId] {
  pointer-events: auto; /* enable for label */
}

Вариант 5 (JavaScript)

Если вы по-прежнему хотите иметь возможность щелкнуть свое событие, но не допустить, чтобы события щелчка поднимались вверх до родительской метки, это называется «остановить распространение», и, к сожалению, прямого CSS подхода не существует; вам нужно будет использовать JavaScript. Вот вам пример. Документация для event.stopPropagation 

<body>
  <input id='myId' type='checkbox' />
  <label for='myId'>
    <div id='label-div'>Hello</div>
  </label>

  <script>
    var label = document.getElementById('label-div');
    label.addEventListener('click', function(e) {
      e.stopPropagation();
    });
  </script>
</body>


label {
  pointer-events: auto;
  
  border: 1px solid blue;
  padding: 10px;
}
label > div {
  pointer-events: none !important;
  
  display: inline-block;
  border: 1px solid red;
  padding: 10px;
}
<input type='checkbox' id='myId' />
<label for='myId'>
  <div>Hello</div>
</label>

#unclickable {
  pointer-events: none !important;
 
  border: 1px solid blue;
  display: inline-block;
  padding: 20px;
}

label {
  pointer-events: all;
  
  border: 1px solid red;
  padding: 10px;
  margin: 10px;
}
<input type='checkbox' id='myId' />
<div id='unclickable'>
  <label for='myId'>Hello</label>
</div>
...