Как сделать HTML-элемент не кликабельным? - PullRequest
Новая
       19

Как сделать HTML-элемент не кликабельным?

0 голосов
/ 22 мая 2019

Как сделать элемент HTML без нажатия?

Каждый элемент нажимается JavaScript. Нажав на элемент, вы получите alert(this.id). Как сделать parent2 не активируемым, но кнопка внутри позволяет вам щелкать?

Конечно, у меня будет больше parent3, parent..4 с div внутри и формами. Есть ли простой способ?

Это поможет, если есть способ щелкнуть все это внутри родителя (потомков). Parent2, parent3 ... не для щелчка, а для создания внутри Parent2 .., 3..to to clickable 

var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId;

for (var i = 0; i < divCount; i += 1) {
  div[i].onclick = function(e) {
    clickedDivId = this.id;
    event.stopPropagation();
    alert(this.id);
  };
}
#parent {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#parent2 {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#parent3 {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#child {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}
<div id="parent">
  <div id="child"></div>
</div>

<div id="parent2">
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
</div>

<div  id="parent3">
<button id="button" type="button" onclick="alert('Hello world2!')">Click 
Me!</button>
</div>

Ответы [ 5 ]

1 голос
/ 22 мая 2019

вместо присоединения события on-click к div, поместите его только на кнопку, и этот обработчик событий должен реализовать предупреждение и логику stopPropagation.

Нет необходимости прикреплять любое событие onClick к div

Ваш код должен быть похож на

HTML

<div id="parent">
  <div id="child"></div>
</div>

<div id="parent2">
  <button id="myButton" type="button" onclick="buttonClicked(event)">Click Me!</button>
</div>

Javascript :

function buttonClicked(event){
      console.log('lklklk', event)
      event.stopPropagation();
      alert('Hello world!')

  }
0 голосов
/ 22 мая 2019

Вы можете добавить некоторый код CSS к кнопке, например: 

button { 
  position: absolute;
  top: 0;
  left: 10px;
 }

с помощью этой кнопки кода получите уровень выше, чем родительский блок, помните, что родительский блок должен иметь position:relative

0 голосов
/ 22 мая 2019

Это исключит parent2 из вашего события onclick: 

var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId;

for (var i = 0; i < divCount; i += 1) {
  if(div[i].id != "parent2"){ //<-- Only if div is not parent2
    div[i].onclick = function(e) {
      clickedDivId = this.id;
      event.stopPropagation();
      alert(this.id);
    };
  }
}
#parent {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#parent2 {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#child {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}
<div id="parent">
  <div id="child"></div>
</div>

<div id="parent2">
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
</div>

Хотя я думаю, что было бы лучше решить эту проблему с помощью класса: 

var clickables = document.getElementsByClassName("clickMe")
var divCount = clickables.length;
var clickedDivId;

console.log(clickables);

for(let i=0; i<clickables.length; i++){
  clickables[i].onclick = function(e) {
    clickedDivId = clickables[i].id;
    event.stopPropagation();
    alert(clickables[i].id);
  };
}
 #parent {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#parent2 {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#child {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}
<div id="parent">
  <div id="child" class="clickMe"></div>
</div>

<div id="parent2">
  <button class="clickMe" type="button">Click Me!</button>
</div>
0 голосов
/ 22 мая 2019

Если вы хотите, чтобы ваш parent2 div не выполнял никакого кода, просто return, когда clickedDivId == "parent2". 

var allDivs = document.querySelectorAll("div");
var disDivs = document.querySelectorAll("div.dis");
var divCount = allDivs.length;


for (var i = 0; i < divCount; i += 1) {
  allDivs[i].onclick = function(e) {
    e.stopPropagation();
    if(this.className == 'dis')
      return;
    alert(this.id);
  };
}
#parent, #parent2, #parent3 {
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}

#child {
  width: 430px;
  height: 70px;
  margin: 10px;
  float: left;
  background-color: red;
}

.dis{
  cursor:not-allowed
}
<div id="parent">
  <div id="child"></div>
</div>

<div id="parent2" class="dis">
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
</div>

<div  id="parent3" class="dis">
<button id="button" type="button" onclick="alert('Hello world2!')">Click 
Me!</button>
</div>

Если у вас есть несколько divs, вы можете назначить им класс и в обработчике событий проверить, присутствует ли этот класс для того, на кого нажали div

0 голосов
/ 22 мая 2019

Добавьте идентификатор или что-то для кнопки и проверьте, произошло ли событие от нее, используя e.target. Ниже приведен фрагмент 

document.addEventListener("click", function (e){if(e.target.id == "button") {alert("button clicked")}})
...