How to Stop Event Propagation With Inline Onclick Attribute

How to stop event propagation with inline onclick attribute?

Use event.stopPropagation().

<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>

For IE: window.event.cancelBubble = true

<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>

Stop propagation through html's onclick event and JS

To stop event propagation you have to use the following method.

event.stopPropagation()

The event object is passed by default to the handler function for any event. So, instead of defining event handlers inline, define in them a separate script file. The event handlers should be attached once the DOM has loaded. You can follow the pattern shown in below code snippet.

//handles the click event
function handleClick(ev) {
    console.log('clicked on ' + this.tagName);
    ev.stopPropagation();
}
window.onload = function() {    
    var links = document.getElementsByTagName('a');

    //attaches the event handler to all the anchor tags
    Array.prototype.forEach.call(links, function(elem) { 
        elem.onclick = handleClick; 
    });
}

Reading List

On avoiding inline event registration
MDN reference on how to stop event propagation
Difference between event.PreventDefault and event.stopPropagation
Difference between event.PreventDefault and return false

How to stop event propagation on onclick event in html attribute?

Use event.stopPropagation method of Event. There is a mistake in your second code snippet where you do not pass event to the anonymous function. Fixed code:

<div onclick="(function(e) { e.preventDefault(); e.stopPropagation(); })(event)">

How do I prevent event propagation on link click?

Approach 1

If the child had a normal event listener, it could be prevented by event.stopPropagation()

Yes.

but how do I do it when there is no "event"?

There is an event. You are just not listening for it.

You could solve the problem by listening on the child element:

document.getElementById("parent").addEventListener("click", function() {  alert("Oh no, you clicked me!");});
document.querySelector("a").addEventListener("click", function(e) {  e.stopPropagation();});

<div id="parent" style="width:100px; height:100px; padding: 1em; background-color: #aaa">  <a id="child" href="https://placeimg.com/200/200/nature/sepia">Text</a></div>

Stop event propagation for multiple inline functions JS

try this:

<html>
<head>
  <script>
    function fn1() {
        alert('fn1()');
        return false;
    }

    function fn2() {
        alert('fn2()');
        return true;
    }

    function fn3() {
        alert('fn3()');
        window.location.assign("http://www.google.com");
    }
  </script>
</head>
<body>
    <button onclick="fn1()&&fn2()&&fn3()">Click</button>
</body>
</html>

all functions should return boolean
then use logical operators && inside onclick

<button onclick="fn1()&&fn2()&&fn3()">Click</button>

as you can see if the fn1() returns false f2() and f3() are not executed.

Stopping event propagation from an onclick handler

Found a solution based on Felix Kling's comments:

Need to call event.stopImmediatePropagation() instead of event.stopPropagation()
Need to pass the actual event object from the inline handler (this question was also useful)

Here's a working solution:

http://jsfiddle.net/r95cC/3/

Stop event propagation by clicking inside input element

You have to set stop propagation for input click not on blur ,
so the div click will not be propagated :

see below snippet

function input(){ console.log('input')    event.stopPropagation();}
function inputStopPropagation() {   event.stopPropagation();}
function button(event) {  console.log('button')  event.stopPropagation();}
function div(){event.stopPropagation();  console.log('div')}

<div onClick='div()' style="padding:5px; background :green"><input onBlur='input()' onClick='inputStopPropagation()' /><button onClick='button(event)'> ABCD </button></div>

How to .stopProagation() in a function called via onClick()

Try to pass event as first argument:

function test (e) {    e.stopPropagation();    console.log('click button');}
function testDiv (e) {    console.log('click div');}

<div onClick="testDiv()">    <button onClick="test(event, 'a','b','c')">button</button></div>

`stopPropagation` not working properly if bound using `onclick`

You're not seeing a click when you use the onclick attribute because the click never reaches document — because you stopped propagation.

You're using event delegation:

$(document).on("click", ".abc", function (e) {
// ---------------------^^^^^^^
    alert("child click!");
    e.stopPropagation();
});

$(document).on("click", "#parent", function () {
// ---------------------^^^^^^^^^^
    alert("parent click!");
});

That means you're really hooking the handler on document. If the click never bubbles to document, jQuery can't fire your delegated handlers.

Stop event bubbling - onclick listener

If you prevented the click event from bubbling from the inner div, then it would never reach the one to which you bound the event handler and your function would not fire at all.

The problem here is that event.target matches the element that was actually clicked on. You want event.currentTarget if you want to get the element that the event handler was bound to.

var panel = document.getElementsByClassName('panel');var iframe = document.getElementById('frame');
[].forEach.call(panel, function(each) {    each.addEventListener('click', linkClick);});
function linkClick ( event ) {    event.stopPropagation();    event.preventDefault();    iframe.src = event.currentTarget.dataset.url;}

.panel {    padding: 20px;    margin: 10px;    border: 1px solid yellow;}
.panel div {  display: inline;}

<div class="panel" data-url="https://www.w3schools.com/jsref/event_preventdefault.asp">  <div>Click Me!</div></div><iframe id="frame"></iframe>

How to Stop Event Propagation With Inline Onclick Attribute