How do I prevent parent event handler on a child node?

Question

I have a div and it's listend by a event handler:

$('.thediv').click(function() {
  $(this).remove()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:500px;height:500px">
  <input type="input" style="width:100px;height:20px" />
</div>

The div would be removed if it's clicked.

However, I want to put a text input box on the div and if the user clicks the text input, the div should not be removed. Only when the user clicks the area outside the input box, the div get removed.

What can I do?

read about `event.stopPropagation()` [here](https://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault) — Muhammad Usman, Feb 03 '20 at 05:26

CertainPerformance · Answer 1 · 2020-02-03T07:01:03.693

4

Only remove if the target of the event does not match input:

$('.thediv').click(function(e) {
  if (!e.target.matches('input')) {
    $(this).remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thediv" style="width:500px;height:500px">
  other div content
  <input style="width:100px;height:20px">
</div>

edited Feb 03 '20 at 07:01

answered Feb 03 '20 at 05:27

CertainPerformance

356,069
52
309
320

score 1 · Accepted Answer · answered Feb 03 '20 at 05:27

1

on input click use .stopPropagation() this will prevent from call the parent click

$('.thediv').click(function(){$(this).remove()});

$('#input').click(function(e) {
  e.stopPropagation();
});

<div class="thediv" style="">
  <input type="input" id="input" /><br />
  text here 
  <h1>text here </h1>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Feb 03 '20 at 05:27

Abdelrahman Gobarah

1,544
2
12
29

`` inline version does not work. Is there a way to use inline onclick function? – AGamePlayer Feb 03 '20 at 07:03
use only **onclick="event.stopPropagation()"** – Abdelrahman Gobarah Feb 03 '20 at 07:09
1

– Abdelrahman Gobarah Feb 03 '20 at 07:11

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

In the following demo:

.box is the parent element that listens for the click event.
.box is also referred to as event.currentTarget because it is registered to the click event.
.box is also considered this within the callback function.
The event.target is the origin of the event -- the element that the user clicked.
.box has an <input> child element.
The callback function simply states this:

if the clicked element (aka event.target -- see #4)
is this (aka .box -- see #3), then...
remove this

Note: This will exclude anything within .box that is clicked not just an <input>.

Demo

$('.box').click(function(event) {
  if (this === event.target) {
    $(this).remove();
  }
});

<fieldset class='box' style="width:500px;height:500px">
  <input type="text" style="width:100px;height:20px">
</fieldset>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How do I prevent parent event handler on a child node?

3 Answers3

Demo