Запрет на нажатие DIV, после нажатия BUTTON

165

02 ноября 2018, 22:20

Повтор вопроса

  var container = document.getElementById('mycontainer'); 
  function clickDiss() { 
      container.style.pointerEvents = 'none'; 
  }

<div id="mycontainer" class="container"> 
<div class="box"> 
<div class="text">Test</div> 
<button>test</button> 
<input value="aaa"> 
<p>Там сверху должен блокировать (button и input например) после нажатия btn, а почему-то не работает(((</p> 
</div> 
</div> 
<br> 
<button type="button" name="button" onclick="clickDiss();">btn</button>

Этот вариант не подходит, как еще можно реализовать такой метод?

Как при нажатии кнопки добавить style pointer-events: none; к <div id="mycontainer" class="container">?

Answer 1

Пример

const container = document.querySelector('#mycontainer'); 
const btn = document.querySelector('.btn'); 
 
function clickDiss() { 
  container.classList.add('container-pointer-events') 
} 
btn.addEventListener('click', clickDiss);

.container-pointer-events { 
  pointer-events: none; 
  opacity: .5; /* для примера */ 
}

<div id="mycontainer" class="container"> 
  <div class="box"> 
    <div class="text">Test</div> 
    <button>test</button> 
    <input value="aaa"> 
    <p>Там сверху должен блокировать (button и input например) после нажатия btn, а почему-то не работает(((</p> 
  </div> 
</div> 
<br> 
<button type="button" class="btn" name="button">btn</button>