event.stopPropagation在Firefox中不起作用 [英] event.stopPropagation Not Working in Firefox

问题描述

我正在使用Javascript和CSS，以便当用户点击顶级菜单项，其子菜单项将切换其可见性 - 即单击主项目，其子项目将出现。

为了避免当用户点击一个子菜单项时切换子菜单，我使用了event.stopPropagation （） 方法。

所需结果适用于Chrome，Safari和Dolphin，但在Firefox 26.0和Android Firefox 26.0.1中无效。

如果您运行这个例子（JSBin），您会注意到您可以点击菜单2 和/或菜单3 ，将显示一个子菜单。但是，如果您在Firefox中单击子菜单项（即菜单3.1），则子菜单将消失 - 这是不是我想要的效果。如果您在Chrome / Safari中单击子菜单项，子菜单将保持可见状态 - 这就是我想要发生的事情。 https://developer.mozilla.org/zh-CN/docs/Web/API/event.stopPropagation?redirectlocale=zh-CN&redirectslug=DOM/event.stopPropagation#Syntax =nofollow> Mozilla开发者网络在 Chrome中支持event.stopPropagation（）， Firefox（Gecko）， IE9 ， Opera 和 Safari（WebKit）。所以，我很困惑为什么stopProp方法不适用于我的情况。

你可以看一下我的JS例子，告诉我是什么情况？

正在运行（也在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; 
 
 
 $ / code $ / pre 
 
 ...这里是HTML：
 < ul class =level1> 
< li onclick =toggleChildDisplay（this）>菜单1< / li> 
< li onclick =toggleChildDisplay（this）>菜单2 
< ul class =level2> 
< li onclick =goTo（'＃'）>菜单2.1< / li> 
< li onclick =goTo（'＃'）>菜单2.2< / li> 
< li onclick =goTo（'＃'）>菜单2.3< / li> 
< / ul> 
< / li> 
< li onclick =toggleChildDisplay（this）>菜单3 
< ul class =level2> 
< li onclick =goTo（'＃'）>菜单3.1< / li> 
< li onclick =goTo（'＃'）>菜单3.2< / li> 
< / ul> 
< / li> 
< / ul> 
  
 我正在开发的环境将不允许我使用jQuery。      事件作为你函数的一个参数。
 
 $ $ $ $ $ $ $ $ $ $ > 

然后您可以执行 event.stopPropagation（）并知道事件是什么。

http://jsbin.com/OyUvUqa/2

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.

解决方案

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

这篇关于event.stopPropagation在Firefox中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！