62,272
社区成员
发帖
与我相关
我的任务
分享母版页中悬浮弹框，mouseleave 事件奇怪的兼容性问题，在 IE 下总会因为鼠标移过子元素而被触发。
最近在写一个母版页的按钮弹框，要求按下按钮就在按钮下面弹出一个选择框，按任意一个选择跳转，其中当鼠标离开这个选择框时该选择框就消失，以下是我的 Demo：
本来改代码运行好好的，但是在 IE11 以下版本的 IE 浏览器运行时，就会出现鼠标即便没有移出选择框，在选项框之间移动也会触发mouseleave事件，网上也有不少对此问题的讨论，但是我全部试过都没有用，不知道是不是跟 ASP.NET 或者 母版页 有关系，而且我在其他浏览器（Chrome Firefox Safari 等）都没有遇到这个问题，请问我如何为 IE 写一个兼容的方法？
其实关于这个悬浮弹框的鼠标移出事件，我本来想用 JavaScript 来写的，可惜一直不成功，在子元素（选项框）之间移动也容易在浏览器上触发鼠标移出事件，最后无奈才用了 JQuery 来写，不知道大家能不能用 JS 写这个方法让我学习一下？
这两个问题麻烦大家了帮帮忙，谢谢
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset=utf-8 />
<title>Hide Demo</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divtheme").mouseleave(function(){
$("#divtheme").hide();
});
});
function display(id)
{
document.getElementById(id).style.display="block";
}
function hide(id)
{
document.getElementById(id).style.display = "none";
}
</script>
<style type="text/css">
.con
{
margin-left:auto;
margin-right:auto;
background-color: #FF00F7;
width: 1000px;
height: 1000px;
}
.selfat
{
margin-left:auto;
margin-right:auto;
background-color: #E9E9E4;
width: 1000px;
height: 30px;
padding-bottom: 0px;
}
.seldiv
{
width: 136px;
height: 110px;
border: 1px solid #EF00FF;
position: relative;
float: right;
margin-right: -41px;
margin-top: 30px;
z-index: 10;
}
.seldiv ul
{
list-style-type:none;
background-color: White;
border: 1px solid #00A1FF;
margin-top: 0px;
}
.seldiv ul li
{
text-align:center;
display: block;
font-family: 微软雅黑;
font-size: 15px;
font-weight: 500;
border: 1px solid #EFFF00;
width: 132px;
height: 34px;
margin-left: -40px;
}
.seldiv ul li a
{
line-height: 34px;
}
.selligreen a
{
color:Green;
}
.selligreen:hover
{
background-color:Green;
cursor: pointer;
}
.selligreen:hover a
{
color:white;
}
.selliblue a
{
color:Blue;
}
.selliblue:hover
{
background-color:Blue;
cursor: pointer;
}
.selliblue:hover a
{
color:white;
}
.sellired a
{
color:Red;
}
.sellired:hover
{
background-color:Red;
cursor: pointer;
}
.sellired:hover a
{
color:white;
}
.selbtn
{
float: right;
background-color: #00FFD6;
border: 0px;
height: 100%;
width: 40px;
text-align: center;
}
</style>
</head>
<body>
<div class="selfat">
<a>母版页</a>
<input type="button" id="btntheme" runat="server" class="selbtn" onclick="display('divtheme')" value="color"/>
<div id="divtheme" style="display: none;" class="seldiv" >
<ul>
<li class="selligreen" ><a>green</a></li>
<li class="selliblue" ><a>blue</a></li>
<li class="sellired" ><a>red</a></li>
</ul>
</div>
</div>
<div class="con">
<a>内容页</a>
</div>
</body>
</html>
本来改代码运行好好的，但是在 IE11 以下版本的 IE 浏览器运行时，就会出现鼠标即便没有移出选择框，在选项框之间移动也会触发mouseleave事件，网上也有不少对此问题的讨论，但是我全部试过都没有用，不知道是不是跟 ASP.NET 或者 母版页 有关系，而且我在其他浏览器（Chrome Firefox Safari 等）都没有遇到这个问题，请问我如何为 IE 写一个兼容的方法？
其实关于这个悬浮弹框的鼠标移出事件，我本来想用 JavaScript 来写的，可惜一直不成功，在子元素（选项框）之间移动也容易在浏览器上触发鼠标移出事件，最后无奈才用了 JQuery 来写，不知道大家能不能用 JS 写这个方法让我学习一下？
这两个问题麻烦大家了帮帮忙，谢谢
...全文
请发表友善的回复…
发表回复
吴杼恩 2016-04-19
- 打赏
- 举报
哦哦，您好像有点误解我的意思了，我上面的回复有提到
我再讲一下。我那段JQ和JS：
我再讲一下。我那段JQ和JS：
我再讲一下。我那段JQ和JS：
$(document).ready(function(){
$("#divtheme").mouseleave(function(){
$("#divtheme").hide();
});
});
function hide(id)
{
document.getElementById(id).style.display = "none";
}
$(document).ready(function(){
$("#divtheme").mouseleave(function(){
$("#divtheme").hide();
});
});
function hide(id)
{
document.getElementById(id).style.display = "none";
}
吴杼恩 2016-04-19
- 打赏
- 举报
哦哦，您好像有点误解我的意思了，我上面的回复有提到我再讲一下。我那段JQ和JS：
我再讲一下。我那段JQ和JS：
我再讲一下。我那段JQ和JS：
$(document).ready(function(){
$("#divtheme").mouseleave(function(){
$("#divtheme").hide();
});
});
function hide(id)
{
document.getElementById(id).style.display = "none";
}
$(document).ready(function(){
$("#divtheme").mouseleave(function(){
$("#divtheme").hide();
});
});
function hide(id)
{
document.getElementById(id).style.display = "none";
}
jmyz_0455 2016-04-19
- 打赏
- 举报
能帮忙看一下我六楼的回复嚒？还是已经转行了...
jmyz_0455 2016-04-19
- 打赏
- 举报
请问具体怎么设置不触发的因素？JS里该判断什么
fcqm8888 2016-04-17
- 打赏
- 举报
把触发条件改一下，增加不触发的因素，可能会解决。
jmyz_0455 2016-04-15
- 打赏
- 举报
能关注下嚒@_@
jmyz_0455 2016-04-10
- 打赏
- 举报
请问能不能用 JS 重写 JQ 的那个事件呢？
这个 http://bbs.csdn.net/topics/391931350 能不能帮忙答一下~[/quote]
document.getElementById('<%=divtheme.ClientID %>').style.display = "none";[/quote]
鼠标在子元素间移动会触发移出事件这个怎么解决？
还想懒够 2016-04-10
- 打赏
- 举报
请问能不能用 JS 重写 JQ 的那个事件呢？
这个 http://bbs.csdn.net/topics/391931350 能不能帮忙答一下~[/quote]
document.getElementById('<%=divtheme.ClientID %>').style.display = "none";
jmyz_0455 2016-04-10
- 打赏
- 举报
请问能不能用 JS 重写 JQ 的那个事件呢？
这个 http://bbs.csdn.net/topics/391931350 能不能帮忙答一下~
还想懒够 2016-04-10
- 打赏
- 举报
如果使用了runat="server"，则ID需要取服务端的ID，如$('#<%=divID名.ClientID %>').hide()
jmyz_0455 2016-04-09
- 打赏
- 举报
哦哦，您好像有点误解我的意思了，我上面的回复有提到我再讲一下。我那段JQ和JS：
我再讲一下。我那段JQ和JS：
$(document).ready(function(){
$("#divtheme").mouseleave(function(){
$("#divtheme").hide();
});
});
function hide(id)
{
document.getElementById(id).style.display = "none";
}
吴杼恩 2016-04-09
- 打赏
- 举报
你的写法 hide用的是 jq hide就是隐藏了的 你可以看看 jq hover
我举个例子
$("#按钮).hover(function(){
$("谁“）.hide()
},function(){
$("谁“）.show()
})
这样用就行了 ，不用另外给样式操作显示或者隐藏的
LZ你的jq有待加强 说实话 不要见怪 基础都没有打好
还想懒够 2016-04-08
- 打赏
- 举报
奇怪，我是真心没有试出来在IE（模拟了IE9,10,11）下有这样的现象，反而找不到触发点了。只是以前有过经历，如果是mouseout的情况下，相应地进入到子元素中，就会触发父级的mouseout事件，如果是mouseleave，进入到子元素中，不会触发父元素的mouseleave。建议再检查一下是不是其他的问题导致了此处的混乱？
jmyz_0455 2016-04-08
- 打赏
- 举报
您拿什么东西模拟的？IE11自带的那个工具吗
我确定是mouseleave，因为mouseout试了好久根本不行，会不会是 JQuery 跟 IE11 以前的版本有些潜在的兼容性问题？[/quote]
是的，自带F12工具，没测出来有啥问题[/quote]
您好，请问这一句话
<div id="divtheme" style="display: none;" class="seldiv" >
function hide(id)
{
document.getElementById(id).style.display = "none";
}
jmyz_0455 2016-04-08
- 打赏
- 举报
您拿什么东西模拟的？IE11自带的那个工具吗
我确定是mouseleave，因为mouseout试了好久根本不行，会不会是 JQuery 跟 IE11 以前的版本有些潜在的兼容性问题？
还想懒够 2016-04-08
- 打赏
- 举报
您拿什么东西模拟的？IE11自带的那个工具吗
我确定是mouseleave，因为mouseout试了好久根本不行，会不会是 JQuery 跟 IE11 以前的版本有些潜在的兼容性问题？[/quote]
是的，自带F12工具，没测出来有啥问题
