javascript - mouseover为什么无法阻止冒泡?
本文介绍了javascript - mouseover为什么无法阻止冒泡?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
看的jq之父写的书,上面一段阻止冒泡的代码.然后我自己写了一下.
代码开始
HTML:
<p><a>鼠标移动上来就会变红色字体</a>然而p的内容不会变,因为被取消冒泡了</p>
JS:
var temp_a = document.getElementsByTagName('*');
for (var i = 0; i < temp_a.length; i++) {
if (temp_a[i].nodeName === 'BODY' || temp_a[i].nodeName === 'HTML' || temp_a[i].nodeName === 'DIV')
continue;//因为我一个页面全是笔记 所以不想影响前面的
temp_a[i].onmouseover = function(e) {
this.style.color = 'red';
stop_bubble(e);
};
}
function stop_bubble(e) {
e.stopPropagation();
}
代码结束
我的思路就是鼠标移动到a上时a的颜色改变而p不改.
结果没用.然后我把mouseover换成click就有用了.
之后我便把mouseover换成mouseenter.发现还是没用.只有click能触发组织冒泡.
这是firefox的调试台.我鼠标移动到a上 this是<p>
解决方案
刚才测试了一下。火狐上没有出现阻止冒泡失效的问题。
在Chrome上也没有出现阻止冒泡失效的问题,但是有一个现象,由于a标签高度是16px,而p标签是18px。所以会出现mouseover时,鼠标进入a与p之间1px的间隙,而直接触发p标签的事件。需要修改样式使a标签与p同高,才能完成测试。
如果还有问题,请补充鼠标移动事件的效果图,和元素高度的截图。
这篇关于javascript - mouseover为什么无法阻止冒泡?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文