Javascript - stop event bubbling and default action

2014-11-16 4:09 PM

Examples

// Stop bubbling
event.stopPropagation();

// Stop default action
event.preventDefault();

Details

/**
 * Stop bubbling
 * Use stopPropagation to prevent event bubbling.
 */
event.stopPropagation();

// Feel free to check the JSFiddle of this example at the bottom of this tutorial.
// If there is a html structure like L1 > L2 > L3.
// To prevent the onclick event from firing when a child is clicked:
$("#L1").on("click", function(event){
 alert("L1");
});

$("#L2").on("click", function(event){
 alert("L2");
});

$("#L3").on("click", function(event){
 event.stopPropagation();
 alert("L3");
});

// Feel free to check the JSFiddle of this example at the bottom of this tutorial.
// Disable context menu:
$("#L2").on("contextmenu", function(event){
 event.stopPropagation();
 event.preventDefault();
});

Links

JSFiddle : event.stopPropagation();
JSFiddle : event.preventDefault();