<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title> test</title>
<script src="jquery.min.js"></script>
<script type="text/javascript">
function show_s(evt){
$('#test').show();
var e=(evt)?evt:window.event;
if (window.event) {
e.cancelBubble=true;
} else {
e.stopPropagation();
}
}
function init(){
$("body").bind("click", function(){
$('#test').hide();
});
}
$(document).ready(function(){
init();
});
</script>
</head>
<body>
<div onclick="show_s();">dddddddddddddddddddddddddd</div>
<div id="test" style="display:none;">mmmmmmmmmmmmmmmmmmm</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title> test</title>
<script src="jquery.min.js"></script>
<script type="text/javascript">
function show_s(evt){
$('#test').show();
var e=(evt)?evt:window.event;
if (window.event) {
e.cancelBubble=true;
} else {
e.stopPropagation();
}
}
function init(){
$("body").bind("click", function(){
$('#test').hide();
});
}
$(document).ready(function(){
init();
});
</script>
</head>
<body>
<div onclick="show_s();">dddddddddddddddddddddddddd</div>
<div id="test" style="display:none;">mmmmmmmmmmmmmmmmmmm</div>
</body>
</html>
//阻止事件冒泡
var ev = window.event || arguments.callee.caller.arguments[0];
if (window.event) {
ev.cancelBubble = true;
}
else {
ev.stopPropagation();
}
//
var e=(evt)?evt:window.event; 改成
var e = window.event || arguments.callee.caller.arguments[0];就可以了。
解决因mouseover,mouseout冒泡产生的闪烁问题
方法1:
延迟执行(setTimeout)、取消延迟(clearTimeout),就是当mouseout的时候延迟执行,而在mouseover的时候取消延迟执行。当鼠标在DIV上边移动的时候因为延迟的执行所以mouseout一直都不会被触发。
$('div').mouseout(function(){
clearTimeout(t);
t=setTimeout(zoomIn,400);
}).mouseover(function(){
if(t!=null)clearTimeout(t);
t=null;
}
);方法2:jquery(需要版本号大于1.2.2)
mouseenter和mouseleave事件IE特有的函数,使用jquery就很好的解决了兼容问题。函数的原理当第一次鼠标进入节点区域时触发,以后在节点区域内(子节点间)移动时不触发。
$('div').bind("mouseenter",function(){
// do something on mouseenter
});
$('div').bind("mouseleave",function(){
// do something on mouseleaver
});jquery版本 >1.4简化写法:
$('div').bind({
mouseenter:function(){
// do something on mouseenter
},
mouseleaver:function(){
// do something on mouseleaver
}