87,993
社区成员
发帖
与我相关
我的任务
分享子元素阻止冒泡对祖辈元素本身同类事件的影响，祖辈元素移出事件无法正常响应
我现在碰到的问题是 爷爷辈元素div和孙子辈元素li同宽 父元素是ul 。
两个li竖着排列 鼠标移出事件阻止冒泡 div 有10px 宽边框。
鼠标移出快了 移出事件就不执行了
下面是代码：
两个li竖着排列 鼠标移出事件阻止冒泡 div 有10px 宽边框。
鼠标移出快了 移出事件就不执行了
下面是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSSample</title>
<style>
*{margin:0;padding: 0;}
ul{list-style:none;}
li{font-size: 80px;text-align: center;cursor: pointer;display: none;}
#main{width: 200px;margin:50px auto;
border: 10px solid black;
}
.li{width: 200px;height: 100px;line-height: 100px;background: gray;}
.li{width: 200px;height: 100px;line-height: 100px;background: gray;}
#main .set{display: block;background: red;}
.on .li{display: block;}
</style>
</head>
<body>
<div id="main">
<li id="li1" class="li set red">宝贝</li>
<li id="li2" class="li">商铺</li>
</div>
<script type="text/javascript">
function addEvent (id,event,fn) {
var ele = getDOM(id)||document;
if (ele.addEventListener){
ele.addEventListener(event,fn,false);
} else if(ele.attachEvent){
ele.attachEvent("on"+event,fn);
}
}
function getDOM (id) {
return document.getElementById(id);
}
var Clickflag = 0;
var oSet = document.getElementsByClassName("set")[0];
addEvent("main","mouseover",function () {
this.className = "on";
});
addEvent("main","mouseout",function () {
// if(!Clickflag){
this.className = "";
oSet.className = "li set";
// }
});
addEvent("li1","mouseover",function (event) {
this.className = "li set";
// getDOM("main").className = "on";
// event.stopPropagation();
});
addEvent("li1","mouseout",function (event) {
this.className = "li";
event.stopPropagation();
});
addEvent("li2","mouseover",function (event) {
this.className = "li set";
// getDOM("main").className = "on";
// event.stopPropagation();
});
addEvent("li2","mouseout",function (event) {
this.className = "li";
event.stopPropagation();
});
// addEvent("li2","click",function (event) {
// this.className = "li set";
// oSet = this;
// event.stopPropagation();
// getDOM("main").className ="";
// });
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
gcl19930123 2017-04-30
- 打赏
- 举报
感谢楼上两位。我现在想解决的问题是阻止时间冒泡的机理。 阻止事件冒泡所需要的时间，和鼠标移出所需要的时间。是不是因为这两个时间的差导致我所描述的现象
qq_35413026 2017-04-06
- 打赏
- 举报
用 mouseleave 和 mouseenter 试试
天际的海浪 2017-04-06
- 打赏
- 举报
改用mouseenter 和 mouseleave 事件。并且不需要阻止冒泡
addEvent("main","mouseenter",function () {
this.className = "on";
});
addEvent("main","mouseleave",function () {
// if(!Clickflag){
this.className = "";
oSet.className = "li set";
// }
});
addEvent("li1","mouseenter",function (event) {
this.className = "li set";
// getDOM("main").className = "on";
// event.stopPropagation();
});
addEvent("li1","mouseleave",function (event) {
this.className = "li";
});
addEvent("li2","mouseenter",function (event) {
this.className = "li set";
// getDOM("main").className = "on";
// event.stopPropagation();
});
addEvent("li2","mouseleave",function (event) {
this.className = "li";
});
