CODEWITHSUNDEEP
javascripthtmlcss
Radex
Radex

Reputation: 8587

How to prevent a onClick on a specific div

I am trying to build a simple dialog with these simple uses cases:

My problem: when user click any point in the white div, the function is fired, when instead I want all the white div are to do not respond on click.

Any ideas how to fix it? CSS or JS solution appreciate

const parent = document.getElementById('parent')
const child = document.getElementById('child')
const button = document.getElementById('button')

parent.addEventListener('click', () => window.alert('close'))

button.addEventListener('click', (e) => {
e.stopPropagation()
window.alert('do something else')}
)
.parent {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: gray;
}

.child {
  width: 200px;
  height: 200px;
  background-color: white;

}
<div id="parent" class="parent">
  <div id="child" class="child">
    some content
    <button id="button">do something else</button>
  </div>
</div>

Upvotes: 0

Views: 256

Answers (3)

Pradeep Rajvanshi
Pradeep Rajvanshi

Reputation: 115

Just Add this code

child.addEventListener('click', (e)=> {
  e.stopImmediatePropagation();
});


const parent = document.getElementById('parent')
const child = document.getElementById('child')
const button = document.getElementById('button')

parent.addEventListener('click', () => window.alert('close'))

button.addEventListener('click', (e) => {
e.stopPropagation()
window.alert('do something else')}
)

child.addEventListener('click', (e)=> {
  e.stopImmediatePropagation();

});
.parent {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: gray;
}

.child {
  width: 200px;
  height: 200px;
  background-color: white;

}
<div id="parent" class="parent">
  <div id="child" class="child">
    some content
    <button id="button">do something else</button>
  </div>
</div>

Upvotes: 0

KooiInc
KooiInc

Reputation: 122936

Use event delegation:

document.addEventListener('click', (evt) => {
  const origin = evt.target;
  console.clear();
  // only do something if the origin clicked
  // is #parent or #button
  if (origin.id === "parent") {
    return console.log('close');
  }
  if (origin.id === "button") {
    return console.log("something else");
  }
});
.parent {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: gray;
}

.child {
  width: 200px;
  height: 200px;
  background-color: white;

}
<div id="parent" class="parent">
  <div id="child" class="child">
    some content
    <button id="button">do something else</button>
  </div>
</div>

Upvotes: 1

C14L
C14L

Reputation: 12558

Events "bubble up". So assuming that you meant to say

const child = document.getElementById('child')

you could just cancel the bubbling.

child.addEventListener('click', e => e.stopPropagation())

Upvotes: 1

Related Questions