Prevent Execution of Parent Event Handler

Prevent execution of parent event handler

You can add a handler for the child that will prevent the click event from propagating up:

function handler(event) {
    event.stopPropagation();
    // now do your stuff        
}
$('#a').add('#b').click(handler);

This way clicks to '#b' will not propagate to '#a'. Neither will clicks to '#c' go to '#b', and hence not to '#a'.

How can I prevent parent element event execution from code inside children event

You should pass the event by dependency injection to the specific method (content.onclick) and then stop the propagation of it.

container.onclick = () => {  alert(0);};content.onclick = (e) => {  e.stopPropagation();  alert("Voilà, this prevent that appears alert(0) from parent element event.");};

#container{  height: 100px;  background-color: gray;}#content{  height: 50px;  width: 150px;  background-color: green;}

<div id="container">    <div id="content"></div>  </div>

How do I prevent a parent's onclick event from firing when a child anchor is clicked?

Events bubble to the highest point in the DOM at which a click event has been attached. So in your example, even if you didn't have any other explicitly clickable elements in the div, every child element of the div would bubble their click event up the DOM to until the DIV's click event handler catches it.

There are two solutions to this is to check to see who actually originated the event. jQuery passes an eventargs object along with the event:

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

You can also attach a click event handler to your links which tell them to stop event bubbling after their own handler executes:

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

React - Prevent Event Trigger on Parent From Child

You can use stopPropagation

stopPropagation - Prevents further propagation of the current event in
the bubbling phase

var App = React.createClass({  handleParentClick: function (e) {     console.log('parent');  },
  handleChildClick: function (e) {    e.stopPropagation();    console.log('child');  },
  render: function() {    return <div>      <p onClick={this.handleParentClick}>        <span onClick={this.handleChildClick}>Click</span>      </p>    </div>;  }});
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="root"></div>

Stop parent event firing on child element click

Without jQuery you can use event delegation and determine to act using Element.closest()

document.addEventListener(`click`, handle);

function handle(evt) {
  console.clear();
  
  if (!evt.target.closest(`.innerUl`) && evt.target.closest(`#testUl`)) {
      console.log(`You clicked (something within) the first li of ul#testUl`);
  }
}

<ul id="testUl">
  <li>
    <a href="#">Test A</a>
    <div class="innerUl">
      <ul>
        <li>Inner A</li>
        <li>Inner B</li>
        <li>Inner C</li>
      </ul>
    </div>
  </li>
</ul>

Trigger click event on parent but prevent click event on children

As you mentioned in the comment you want to stop the goRed method for certain condition then do this inside your function.

if(event.target.id=='content') return; // Add your condition here and return.

Instead of the event.target.id=='content' condition check for your condition when you want it to execute.

UPDATE

You can check this condition $(this).parent().is('#container') to check if your content is inside container.

SNIPPET

$(document).on('click', '#container', goGreen )$(document).on('click', '.content', goRed )

function goGreen( event ){  $(this).find('.content').addClass('green')}
function goRed( event ){  if($(this).parent().is('#container')) return; // Add your condition here and return.  $(this).addClass('red')}

.content {  display: inline-block;  width: 100px;  height: 100px;  border: 1px solid #000;  cursor: pointer;}
#container{  display: inline-block;  padding: 3px;  border:2px solid red;}
.green {  background-color: lightgreen;}
.red {  background-color: tomato;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">  <a class="content"></a></div>
<a class="content"></a>

jquery stop child triggering parent event

Do this:

$(document).ready(function(){
    $(".header").click(function(){
        $(this).children(".children").toggle();
    });
   $(".header a").click(function(e) {
        e.stopPropagation();
   });
});

If you want to read more on .stopPropagation(), look here.

Prevent parent container click event from firing when hyperlink clicked

Yes, use stopPropagation. See: Prevent execution of parent event handler

JavaFX How not to passed event to a parent

You're using event filters. Filters are called while traversing from the root to the target node. Since all filters of the ancestors are called before a node's own filter is called it's impossible for the node's filter to prevent the execution of the parent's filter.

You should use event handlers instead which are called while traversing from the target node to the root node and allow you to prevent execution of the parent's event handlers by consuming the event:

pane.addEventHandler(MouseEvent.ANY, new EventsHandler(e -> System.out.println(""), e -> { 
     createEvents(e.getX(), e.getY());
})});

circle.addEventHandler(MouseEvent.MOUSE_CLICKED, event -> {
    System.out.println("Clicked!");
    event.consume();
});

Note: If you only register a single event handler for a specific event type you can assign e.g. the onMouseClicked property instead of using addEventHandler:

circle.setOnMouseClicked(event -> {
    System.out.println("Clicked!");
    event.consume();
});

---

Related Topics