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

     })

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

秒客网

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

相关文章