window.open('') 火狐，IE事件冒泡处理，点击事件冒泡处理
写PC下拉菜单的时候，hover样式显示下拉菜单，可能会这样写
1 <li class="xb_li1" onclick="window.open('')">精英团队</li> 2 <li class="xb_li1" onclick="window.open('')">720°全景</li> 3 <li class="xb_li1" onclick="window.open('')">装修选材</li> 4 <li class="xb_li1" onclick="window.open('')">装修攻略</li> 5 <li class="xb_li1" onclick="window.open('')">关于我们 6 <ul> 7 <li onclick="window.open('')">公司简介</li> 8 <li onclick="window.open('')">公司荣誉</li> 9 <li onclick="window.open('')">公司历程</li> 10 <li onclick="window.open('')">发展历程</li> 11 <li onclick="window.open('')">联系我们</li> 12 </ul> 13 </li>
这样的话点击的时候会发生很尴尬的事情，谷歌点击很正常，但是火狐点击二级菜单的时会打开两个新页面，分别是当前点击的链接页面和父级的链接 ，分别打开“关于我们”和“公司简介”子元素的链接
那么如何阻止 click 事件冒泡到父元素：
这里需要做兼容处理，小编修改成了如下代码：
1 <li class="xb_li1" data-url="http://www.runoob.com">装修案例 2 <ul> 3 <li data-url="https://www.cnblogs.com">中央国际</li> 4 <li data-url="https://www.cnblogs.com">万科云岩大都会</li> 5 <li data-url="https://www.cnblogs.com">观府壹号</li> 6 </ul> 7 </li>
装修案列是父级元素，中国国际属于子元素，data-url 是自定义元素，用来存放链接的，然后js获取该链接
1 //xb:codeBlockDescribe:菜单点击事件 2 //给li添加点击事件 3 $(".xbm_topBox .xb_menuBox li").click(function(event){ 4 //判断是否支持stopPropagation方式，ie不支持 5 if (event && event.stopPropagation) { 6 //W3C取消冒泡事件代码 7 event.stopPropagation(); 8 } else { 9 //IE取消冒泡事件支持代码 10 window.event.cancelBubble = true; 11 } 12 //xb:codeBlockDescribe:两个自定义属性，data-url地址 13 //$(this).attr("data-url") 获取当前点击元素的自定义属性值得 14 //window.open新窗口打开页面，第一个参数为地址 15 window.open($(this).attr("data-url")); 16 })
小编亲测有效，感谢大家支持