Search code examples
javascriptfirefoxstoppropagation

event.stopPropagation Not Working in Firefox

I am building a sidebar vertical menu that contains Main Menu items and one level of sub-menu items.

I am using Javascript and CSS so that when the user clicks a top-level menu item, its sub-menu items will toggle their visibility - i.e. Click a main item and its sub items will appear. Click the main item again and the sub items disappear.

To avoid the sub-menu from toggling when the user clicks a sub-menu item, I used the event.stopPropagation() method.

The desired result works in Chrome, Safari, and Dolphin, but does not work in Firefox 26.0 nor Android Firefox 26.0.1.

If you run this example (JSBin), you will notice that you can click Menu 2 and/or Menu 3 and a sub-menu will be displayed. That part is fine in all browsers.

However, if you click a sub-menu item (i.e. Menu 3.1) in Firefox, the sub-menu will disappear - which is not the desired effect I want. If you click a sub-menu item in Chrome/Safari, the sub-menu stays visible - which is what I want to occur.

I read on Mozilla Developer Network that the event.stopPropagation() is supported in Chrome, Firefox (Gecko), IE9, Opera, and Safari (WebKit). So, I'm confused as to why the stopProp method is not working in my case.

Can you take a look at my JS example and tell me what's up?

Here's the Javascript that I'm running (also at JSBIN):

function goTo(id) {
     event.stopPropagation();
     location.href = id;
 }

 function toggleChildDisplay(parentElement) {
     var children = parentElement.children;
     var displayStyle = "";
     for (var i = 0; i < children.length; i++) {
         displayStyle = children[i].style.display;
         if (displayStyle.toLowerCase() === "none" || displayStyle === "") 
             children[i].style.display = "list-item";
         else 
             children[i].style.display = "none";
     }
}

... and here's the HTML:

<ul class="level1">
    <li onclick="toggleChildDisplay(this)">Menu 1</li>
    <li onclick="toggleChildDisplay(this)">Menu 2
        <ul class="level2">
            <li onclick="goTo('#')">Menu 2.1</li>
            <li onclick="goTo('#')">Menu 2.2</li>
            <li onclick="goTo('#')">Menu 2.3</li>
        </ul>
    </li>
    <li onclick="toggleChildDisplay(this)">Menu 3
        <ul class="level2">
            <li onclick="goTo('#')">Menu 3.1</li>
            <li onclick="goTo('#')">Menu 3.2</li>
        </ul>
    </li>
</ul>

P.S. The environment that I'm developing on will not allow me to use jQuery.

Solution

  • You need to pass the event as an argument to your function.

    goTo(event, '#')

    Then you can do event.stopPropagation() and it knows what event is.

    http://jsbin.com/OyUvUqa/2