Ignore Parent onClick event when Child element is clicked

Related searches

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

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'));
        }
    });
});

jQuery event.stopPropagation() Method, Example. Stop the click event from bubbling to parent elements: $("span").click( function(event){ event.stopPropagation(); alert("The span element was clicked."); }); The stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event. You can use the method event.isPropagationStopped() to know whether this method was ever called (on that event object). Syntax: Here is the simple syntax to use this method: event.stopPropagation

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...

Prevent inner elements trigger an event on the parent – AntiMath, event.stopPropagation();. }); $( '#parent' ).on( 'click' , function (event){. //attach event on the parent. alert( 'Parent element clicked!' ); });� In your first example with a checkbox inside a div, onchange is not the same event as onclick so calling event.stopPropagation() in the onchange handler will not stop the outer onclick from firing. You need an additional onclick handler on the checkbox to prevent the click from bubbling up.

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

Event Bubbling, Let's attach a click event to div.child element, so that it may cry when we hit it: // make the child cry, when we hit him. $('.child').on('click'� The HTML markup here is quite a simple one. We have a parent div, which has four child elements with specific IDs, one, two, three and four. Now, before we prevent the click event on certain child element, lets say span with id “two” in our case, let us add the click event to all the child elements first.

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;
});

Event Bubbling and Event Capturing in JavaScript, It must trigger the click event each of its parent elements first, starting at the By default, every element of HTML is child of the window object. According to Event Bubbling, now if we click the .child element, this click event will be first triggered for the .child then it will be triggered for .parent and finally .grandParent and so on till the document is reached. If we click the .parent, it’ll be triggered for the .parent and then .grandParent and so on till the document is reached

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

Can not prevent a child onClick event from the parent's onMouseUp , So I try prevent onClick event on Element component such way: cla return ; // child was clicked, ignore onClick } // rest of click logic here }� By a adding an onClick function for the child modal (content div) mouse click events are prevented to reach the 'closeLogin' function of the parent element. This did the trick for me and I was able to create a modal effect with 2 simple divs.

I do click down, mouse move, and click up (all this events apply within element area). Events onMouseDown, onMouseMove, onMouseUp defined on the parent element SwipePanel. So I try prevent onClick event on Element component such way: cla

ASP.NET Core Blazor event handling. 07/06/2020; 6 minutes to read; In this article. By Luke Latham and Daniel Roth. Razor components provide event handling features. For an HTML element attribute named @on{EVENT} (for example, @onclick) with a delegate-typed value, a Razor component treats the attribute's value as an event handler.

But, is it possible to remove the event listener from the parent altogether when the child element is clicked (before the onclick of the parent fires)? Then I could restore it (the event listener) after the child element actions run their course

Comments
  • This is one of the reasons why onclick="" is outdated way to handle events...
  • Does anybody have a working example of this?
  • Take a look at updated code.
  • Ok thats great, really close with this one... but the onclick needs to stay "inline" as its originally asp.net code - here is an updated bootply - bootply.com/mm4xEf5kXW I have added jquery that I think should work theoretically from an amateur!
  • If all elements have different onclick handlers, then you can use this version.
  • event.stopPropagation() will prevent info block opening: example.
  • return false will prevent info block opening: example.
  • There is no need in e.preventDefault(); if you use return false, because it includes both .preventDefault() and .stopPropagation(). $(this).attr('data-toggle') can be simplified into $(this).data('toggle'). And once more: return false will prevent info block opening.
  • Yeah but he might want to be able to click on those child elements. So he just needs to stopPropagation because you've eventually got to enable those pointer events for any children that need interactivity.