window.open('') 火狐，IE事件冒泡处理，点击事件冒泡处理

window.open('') 火狐，IE事件冒泡处理，点击事件冒泡处理

写PC下拉菜单的时候，hover样式显示下拉菜单，可能会这样写

 <li class="xb_li1" onclick="window.open('')">精英团队</li>
      <li class="xb_li1" onclick="window.open('')">720°全景</li>
      <li class="xb_li1" onclick="window.open('')">装修选材</li>
      <li class="xb_li1" onclick="window.open('')">装修攻略</li>
      <li class="xb_li1" onclick="window.open('')">关于我们
      <ul>
         <li onclick="window.open('')">公司简介</li>
         <li onclick="window.open('')">公司荣誉</li>
         <li onclick="window.open('')">公司历程</li>
         <li onclick="window.open('')">发展历程</li>
         <li onclick="window.open('')">联系我们</li>
     </ul>
13 </li>

这样的话点击的时候会发生很尴尬的事情，谷歌点击很正常，但是火狐点击二级菜单的时会打开两个新页面，分别是当前点击的链接页面和父级的链接 ，分别打开“关于我们”和“公司简介”子元素的链接

那么如何阻止 click 事件冒泡到父元素：

这里需要做兼容处理，小编修改成了如下代码：

<li class="xb_li1" data-url="http://www.runoob.com">装修案例
    <ul>
        <li data-url="https://www.cnblogs.com">中央国际</li>
        <li data-url="https://www.cnblogs.com">万科云岩大都会</li>
        <li data-url="https://www.cnblogs.com">观府壹号</li>
    </ul>
</li>

装修案列是父级元素，中国国际属于子元素，data-url  是自定义元素，用来存放链接的，然后js获取该链接

 //xb:codeBlockDescribe:菜单点击事件
    //给li添加点击事件
    $(".xbm_topBox .xb_menuBox li").click(function(event){
        //判断是否支持stopPropagation方式，ie不支持
        if (event && event.stopPropagation) {
            //W3C取消冒泡事件代码
            event.stopPropagation();
        } else {
            //IE取消冒泡事件支持代码
            window.event.cancelBubble = true;
        }
        //xb:codeBlockDescribe:两个自定义属性，data-url地址
        //$(this).attr("data-url") 获取当前点击元素的自定义属性值得
        //window.open新窗口打开页面，第一个参数为地址
            window.open($(this).attr("data-url"));
    })    

小编亲测有效，感谢大家支持