How to make an HTML element unclickable?

Question

How to make the HTML element without clicking?

Each element is clicked by JavaScript. Clicking on the element gets the alert(this.id). How do I make parent2 not clickable, but the button inside allows you to click?

Of course I will have more parent3, parent..4 with div inside and forms. Is there a simple way?

It will help if there is a way to click it all within the parent(childs). Parent2, parent3 ... not to click, but form inside Parent2..,3..to be 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>

Answer 1

If you want your parent2 div to not run any code, just return when the 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>

If you have multiple divs then you can assign them a class and in the event handler check if that class is present for that clicked div

Answer 2

Add id or something for the button and check if the event was originated from it using the e.target. Below is the snippet

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

Answer 3

instead of attaching on-click event on div put it on button only and that event handler should implement alert and stopPropagation logic.

No need to attach any onClick event on div

You Code should be like

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!')

  }

Answer 4

This would exclude parent2 from you onclick event:

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>

Altough I think it would be better to solve this with a class:

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>

Answer 5

You can add some CSS code to button like :

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

with this code button get a level higher than parent box, remember parent box must have position:relative