Ignore onClick parent event when child is clicked

Question

See http://www.bootply.com/dR7fxjP1bk

By pressing any of the div.rows (allows you to call this parent), the onClick event is triggered, a warning message appears for demonstration purposes.

Inside the string, the accordion crashes when the "info" button (orange button) is pressed (allows you to call this child), but the problem is that the parents are triggered by alerts.

I need the info button so as not to trigger a warning, only when they click somewhere else will a warning appear.

I tried various ways such as using (e) stopPropagation.on.off calls, etc. I am not the best jquery guy, so I need a little help to make this work, and also helped me learn something!

<div class="row ticket-selector" onclick="alert('Hello World!');"> <a data-toggle="collapse" data-parent="#ticket-panel" href="#collapseOne" class="tickets-more"><span class="halflings info-sign orange"></span></a> </div> 

The above is a jist - but better for understanding - http://www.bootply.com/dR7fxjP1bk

Answer 1

The idea is to remove the onclick="" handler, storing its value in another field, and then execute (evaluate) the value in the user click event handler:

Sample code .

 $(document).ready(function() { var elements = $(".ticket-selector"); elements.each(function() { var handler = $(this).attr('onclick'); $(this).data('click', handler); }); elements.attr('onclick', ''); elements.click(function(e) { if (!$(e.target).hasClass("info-sign")) { eval($(this).data('click')); } }); }); 

Answer 2

Check out the working demo HERE

I think you should use event.stopPropagation () jquery api and you can use it as

 $(document).ready(function(){ $('.tickets-more').click(function(event){ // your stuff here alert("Alert On Click"); event.stopPropagation(); }); }); 

event.stopPropagation () to stop the pop-up event that you are encountering. For further documentation, refer to HERE

Hope this helps ...

Answer 3

take an information class from a div. Wrap them with another clean div.

Answer 4

In the orange button, click the add return false handler; in the end, this will prevent the event from occurring for the parent. Similar:

 jQuery('.tickets-more').click(function(){ // your stuff here return false; }); 

Answer 5

If using css classes doesn't bother you, you can check the attributes / classes of the clicked element. For instance:

 $('.parent-element').on('click',function(e){ if ( $(this).attr('data-toggle') ){//has attribute data-toggle e.preventDefault(); return false; } }); 

This will depend on your DOM tree a little more. You can find a condition that will disable any event

Answer 6

Use css:

  pointer-events: none; 

This will make all elements fully transparent to mouse events.

Answer 7

I discovered that this works for me to catch a click.

 onclick="event.preventDefault ? event.preventDefault() : event.returnValue = false;" 

Answer 8

If it’s not about clicking on the elements inside them, this will help you.

 function clickhere(obj){ let theid = obj.id; console.log(theid); event.stopPropagation(); }