javascript - event.stopPropagation 在 Firefox 中不起作用

Question

我正在构建一个包含主菜单项和一级子菜单项的侧边栏垂直菜单。

我正在使用 Javascript 和 CSS，这样当用户单击顶级菜单项时，其子菜单项将切换其可见性 - 即单击主项，其子项将出现。再次点击主项，子项消失。

为了避免在用户单击子菜单项时切换子菜单，我使用了 event.stopPropagation() 方法。

期望的结果适用于 Chrome、Safari 和 Dolphin，但不适用于 Firefox 26.0 和 Android Firefox 26.0.1。

如果你运行 this example (JSBin) ，您会注意到您可以单击 Menu 2 和/或 Menu 3，然后会显示一个子菜单。这部分在所有浏览器中都很好。

但是，如果您在 Firefox 中单击子菜单项(即 Menu 3.1)，子菜单将消失——这不是我想要的效果。如果您在 Chrome/Safari 中单击子菜单项，子菜单将保持可见 - 这正是我想要发生的。

我阅读了Mozilla Developer Network Chrome、Firefox (Gecko)、IE9、Opera 和Safari (WebKit)。所以，我很困惑为什么 stopProp 方法在我的情况下不起作用。

你能看看我的 JS 示例并告诉我发生了什么吗？

这是我正在运行的 Javascript ( 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";
     }
}

...这是 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>

附言我正在开发的环境不允许我使用 jQuery。

Answer 1

您需要将事件作为参数传递给您的函数。

goTo(event, '#')

然后你可以执行 event.stopPropagation() 它知道什么是事件。

http://jsbin.com/OyUvUqa/2