window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理
2024-08-20 10:45:36
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"));
})
小编亲测有效,感谢大家支持
最新文章
- ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave由于鼠标移动速度过快导致问题解决办法
- MVC中使用EF增删改查,简单的例子
- 学习Linux系列--布署常用服务
- 写一个程序,用于分析一个字符串中各个单词出现的频率,并将单词和它出现的频率输出显示。(单词之间用空格隔开,如“Hello World My First Unit Test”)
- android tablelayout 显示图片
- UVa 11021 (概率 递推) Tribles
- Shell命令合集
- rac各节点实例需设置为相同的一些参数
- boxfilter 实现
- C#正则学习
- canvas三环加载进度条
- XML之XPath
- Spring mvc整合freemarker详解
- TestNG深入理解
- springBoot 全局异常方式处理自定义异常 @RestControllerAdvice + @ExceptionHandler
- 内网ip/公网ip
- git冲突Please move or remove them before you can merge
- Navicat Win 和 Mac 视图类快捷键对比
- openstack swift节点安装手册2-创建rings
- Codeforces 1076 E - Vasya and a Tree