Stop propagation through html's "onclick" event and JS

Question

This is my html chunk

<tr>
    <td class="c_menu" id="bat_light">
        <a href="someLink/file.html#"  onclick="OpenItem('light');return false;">sometitle</a>
    </td>
    <td class="c_menu"  id="bat_econom">
        <a href="someLink/file.html#" onclick="OpenItem('econom');return false;">
    sometitle</a>
    </td>
    <td class="c_menu"  id="bat_standart">
        <a href="someLink/file.html#" onclick="OpenItem('standart');return false;">
    sometitle</a>
    </td>
    <td class="c_menu"  id="bat_premium">
        <a href="someLink/file.html#" onclick="OpenItem('premium');return false;">
    sometitle</a>
    </td>
</tr>

and this is JavaScript intro at the top

function OpenItem(name){
    var blocks = ['light', 'econom', 'standart', 'premium'];
    for(var i = 0; i < blocks.length; i++){
        if (blocks[i] == name){
            document.getElementById('bat_'+blocks[i]).className="c_menu active";
            document.getElementById('descr_'+blocks[i]).style.display="block";
            document.getElementById('tab_'+blocks[i]).style.display="block";
        }
        else{
            document.getElementById('bat_'+blocks[i]).className="c_menu";
            document.getElementById('descr_'+blocks[i]).style.display="none";
            document.getElementById('tab_'+blocks[i]).style.display="none";
        }
    }
}

I understand how to fix page default topscrolling in JQuery,but helpless in this case with simple JS. Rewriting the code to JQuery unacceptable. Tried to set 'this' as second argument to function and then event.preventDefault() - does not work.

The `return false` should cover this. Check your console to see if there are any other errors in the JS that might cause it to fail before it gets to the end. — Tom Pietrosanti, Aug 06 '14 at 15:33
Separating this out seems to work. There must be an event attached to a parent element, or as Tom says, an error causing your script to fail. http://codepen.io/anon/pen/fxjbg — Tank, Aug 06 '14 at 16:25

score 4 · Accepted Answer · edited May 23 '17 at 11:46

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

and what about the argument,i'm passing to the function via onclick event in html? This gonna work still? — tegowai, Aug 07 '14 at 04:27
No. It seems that you have data associated with your markup so the best way would be data-* attributes of HTML. Check this [link](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) out. With this above approach you would write `data-type = "light"` and access it using `this` inside the event handler. — Ajinkya, Aug 08 '14 at 04:58

score 4 · Answer 2 · answered Mar 11 '17 at 17:44

4

You can write event.stopPropagation() directly in the onclick attribute too.

<div class="example" onclick="someFuntion(); event.stopPropagation();"></div>

answered Mar 11 '17 at 17:44

Roolern

51
3

Stop propagation through html's "onclick" event and JS

2 Answers2