Question

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

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

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

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

如果您运行this example (JSBin)，您会发现可以点击Menu 2和/或Menu 3，系统会显示一个子菜单。这部分适用于所有浏览器。

但是，如果在Firefox中单击子菜单项（即菜单3.1），子菜单将消失 - 这不是我想要的效果。如果您点击Chrome / Safari中的子菜单项，子菜单将保持可见 - 这就是我想要发生的事情。

我在Mozilla Developer Network上看到Chrome，Firefox (Gecko)，IE9，Opera和{{1}支持event.stopPropagation（） }。所以，我很困惑为什么stopProp方法在我的情况下不起作用。

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

这是我正在运行的Javascript（also at JSBIN）：

Safari (WebKit)

...这是HTML：

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";
     }
}

P.S。我正在开发的环境将不允许我使用jQuery。

Answer 1

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

goTo(event, '#')

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

http://jsbin.com/OyUvUqa/2

Answer 2

Javascript now ..

内联javascript不是编写代码的正确方法

此示例显示了处理菜单的“创新”解决方案。

它还向您展示了如何正确处理事件和事件的目标。

它使用：

班级列表
数据集
多个元素的一个处理程序。
css显示和隐藏你的元素。

function handler(e){
 e=e||window.event;
 var target=e.target||e.srcElement;
 var action=target.dataset['action']||'no action';
 !(action=='toggle')||(target.childNodes[1].classList.toggle('show'));
 !target.dataset['url']||alert(target.dataset['url']);
}
var firstUL=document.getElementsByTagName('ul')[0];
firstUL.addEventListener('click',handler,false);

<强>样本

http://jsfiddle.net/Jj6FY/1/

但最后你可以更好地控制一切。

这是一个手风琴功能。

http://jsfiddle.net/YjCbM/1/

如果您有任何问题，请询问。

event.stopPropagation在Firefox中不起作用

2 个答案: