Ignore Parent onClick event when Child element is clicked

Question

Please see - http://www.bootply.com/dR7fxjP1bk

By clicking any of the div.rows (lets call this parent), an onClick event is activated, for demo purposes an alert pops up.

Within the row an accordion collapses when the "info" (orange button) is clicked (lets call this child), but the problem is that the parents alert triggers.

I need the info button not to trigger the alert, only when anywhere else is clicked the alert appears.

I've tried various ways such as using (e)stopPropagation .on .off calls etc... I'm not the best jquery guy so need a little help getting this to work - and also help 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 the jist - but see for better understanding - http://www.bootply.com/dR7fxjP1bk

Answer 1

The idea is to remove onclick="" handler saving its value in another field and then to execute (evaluate) value in custom click event handler:

Example 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 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() stop the event bubbling that you are facing. For further documentation refer the from HERE

Hope it helps...

Answer 3

If the case is avoid clicking on elements inside them, this will help you.

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

Answer 4

If using css classes doesn't bother you, you could check clicked element attributes/classes. Like so:

$('.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 bit more. You could find a condition that will disable any event

Answer 5

Use css:

 pointer-events: none;

This will make the relevant elements completely transparent to mouse events.

Answer 6

take the info class out of the div. Wrap em both with another clean div.

Answer 7

In the orange button click handler add return false; at the end - this will prevent to bubble the event to the parent. Just like this:

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

Answer 8

我发现这对我来说可以捕获点击。

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

Answer 9

Simple solution:

This can work in many cases, such as for a modal backdrop. It will not fire on the parent if any child component is clicked:

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

function handleClick(ev) {
  if (ev.target === ev.currentTarget) alert('Hello World!');
}