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

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