I have an app in which something happens when you click the background, however, I don't want it to activate if you click on something else that is on top of the background. For example:
function handleClick() {
alert("Hello!");
}.container {
position: absolute;
height: 100%;
width: 100%;
background: red;
}
.button {
position: absolute;
height: 20%;
width: 20%;
background: green;
}<div class="container" onClick="handleClick()">
<div class="button"></div>
</div>I have an app in which something happens when you click the background, however, I don't want it to activate if you click on something else that is on top of the background. For example:
function handleClick() {
alert("Hello!");
}.container {
position: absolute;
height: 100%;
width: 100%;
background: red;
}
.button {
position: absolute;
height: 20%;
width: 20%;
background: green;
}<div class="container" onClick="handleClick()">
<div class="button"></div>
</div>In this example, how can I prevent the alert from displaying when the user clicks on the green box?
Share Improve this question edited Apr 3, 2018 at 18:43 JakAttk123 asked Apr 3, 2018 at 18:40 JakAttk123JakAttk123 1,8063 gold badges12 silver badges20 bronze badges 1- Duplicate of stackoverflow./questions/41000403/… – CInvt Commented Apr 3, 2018 at 18:49
5 Answers
Reset to default 7Pass the event to the function, and check whether its target is the same as the element itself. When you click on an inner element, the target will be that element. Use event.stopPropagation() to prevent the event from bubbling out to the container.
function handleClick(event, element) {
if (event.target != element) {
event.stopPropagation();
return;
}
alert("Hello!");
}.container {
position: absolute;
height: 100%;
width: 100%;
background: red;
}
.button {
position: absolute;
height: 20%;
width: 20%;
background: green;
}<div class="container" onClick="handleClick(event, this)">
<div class="button"></div>
</div>You need to use inside div onclick="event.stopPropagation()"
Stopping Bubbling
A bubbling event goes from the target element straight up. Normally it goes upwards till <html>, and then to document object, and some events even reach window, calling all handlers on the path.
But any handler may decide that the event has been fully processed and stop the bubbling.
The method for it is event.stopPropagation().
DEMO
function handleClick() {
alert("Hello!");
}.container {
position: absolute;
height: 100%;
width: 100%;
background: red;
}
.button {
position: absolute;
height: 20%;
width: 20%;
background: green;
}<div class="container" onClick="handleClick()">
<div onclick="event.stopPropagation()" class="button"></div>
</div>You can pare e.target against e.currentTarget like this:
function handleClick(e) {
if (e.target == e.currentTarget) {
alert("Hello!");
}
}.container {
position: absolute;
height: 100%;
width: 100%;
background: red;
}
.button {
position: absolute;
height: 20%;
width: 20%;
background: green;
}<div class="container" onClick="handleClick(event)">
<div class="button"></div>
</div>I'd detach the event handler when that "something" appears over the top:
element.removeEventListener("mousedown", handleMouseDown, true);
(Note the last argument must match the "useCapture" value when you created the event.)
or in your case:
document.getElementById('yourDiv').onclick = null;
or
document.getElementById("yourDiv").removeAttribute("onClick");
You have added the handleClick function on the div that (class="container") covered the screen.
when you click anywhere handleClick will run.
So add that function the div that has class= "button"
<div class="container">
<div class="button" onClick="handleClick()">
</div>