Why is my event propagation not stopping?

Question

I want to stop click event from propagating to parent element. This is the HTML code.

<div style="cursor: pointer; display: inline-block; float: right" onclick="if (confirm('Continue?')) { jQuery(this).children().click(); }">
  <button style="float: right; pointer-events: none;" class="form-submit-bold btn btn-default form-submit" id="edit-submit-password" name="op" value="Save Password" type="submit">Save Password</button>
</div>

And have attached this jquery event to button element from console

jQuery($0).on('click', function(e) {
  alert('hi');
  console.log(e);
  e.stopPropagation();
});

Now, when I click on the button element using jQuery($0).click(); this alerts 'hi' but then again the alert which should have been triggered on clicking div is shown. I want to stop this. Why is stopPropagation not working ?

@Srishty are you expecting the `stopPropagation()` call to prevent the `confirm` dialog in the `div` element from being shown? — Rory McCrossan, Jul 19 '19 at 10:12

Satyam Pathak · Answer 1 · 2019-07-19T10:34:19.017

Remove pointer-events, setting it to none as I found is possibly a reason here

The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

$('button').on('click', function(e) {
e.stopPropagation()
  alert('hi I am child');
  console.log(e.target);
});

div {
  cursor: pointer; display: inline-block; float: right;
}
button {
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div onclick="alert('Hi I am parent')">
<button>
hit me
</button>
</div>

See your Problem

jQuery('button').on('click', function(e) {
  alert('hi');
  console.log(e);
  e.stopPropagation();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="cursor: pointer; display: inline-block; float: right" onclick="if (confirm('Continue?')) { jQuery(this).children().click(); }">
  <button style="float: right;" class="form-submit-bold btn btn-default form-submit" id="edit-submit-password" name="op" value="Save Password" type="submit">Save Password</button>
</div>

Why is my event propagation not stopping?

1 Answers1