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 })
小编亲测有效,感谢大家支持