怎么在DIV 以外的地方单击 odiv.onblur 不起作用

本帖最后由 chxiaohu 于 2013-08-17 09:09:07 编辑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div{

    border:10px solid #ccc;}

ul {
    list-style-type:none;


    border:1px solid #ccc;
    }
    li{
    border:1px solid #ccc;

    width:190px;
    }
</style>
<script type="text/javascript">
window.onload=function  (){
    var odiv=document.getElementById("div1")
    var oli=document.getElementsByTagName("li");
    for(var i=0,len=oli.length;i<len;i++){
oli[i].onclick=function(e){
for(var j=0;j<len;j++){
oli[j].style.backgroundColor='white';
}
this.style.backgroundColor='red';
var a=e||window.event;
if(a.stopPropagation){
a.stopPropagation();
}else{
a.cancelBubble=true;
}
}
}
odiv.onclick=function(){
for(var i=0,len=oli.length;i<len;i++){
oli[i].style.backgroundColor='green';
}
}
}
</script>
<title>无标题文档</title>
</head>

<body>
<div id="div1">
<ul >
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
</ul>
</div>
<input type="text" />
</body>
</html>
这样试试
点击文本框没有效果  但点击div边框确可以  求改造
点击文本框没有效果  但点击div边框确可以  求改造
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div{border:10px solid #ccc;}ul {list-style-type:none;border:1px solid #ccc;}
li{border:1px solid #ccc;width:190px;}
</style><title>无标题文档</title>
</head><body>
<div id="div1" tabindex="0">
<ul >
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
</ul>
</div>
<input type="text" tabindex="1"/>
<script type="text/javascript">
window.onload=function  (){
var odiv=document.getElementById("div1");
var oli=document.getElementsByTagName("li");
odiv.onblur=function (){

for (i=0;i<oli.length;i++){
oli[i].style.backgroundColor="green";
}
}
for (i=0;i<oli.length;i++){
oli[i].ondblclick=function (){
for (i=0;i<oli.length;i++){
   oli[i].style.backgroundColor="white";
}
this.style.backgroundColor="red";
}
}
};</script>
</body>
</html>
http://cjh6311882.diandian.com/post/2012-08-15/40039317929
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div{

    border:10px solid #ccc;}

ul {
    list-style-type:none;


    border:1px solid #ccc;
    }
    li{
    border:1px solid #ccc;

    width:190px;
    }
</style>
<script type="text/javascript">
window.onload=function  (){
    var odiv=document.documentElement;
    var oli=document.getElementsByTagName("li");
    for(var i=0,len=oli.length;i<len;i++){
oli[i].onclick=function(e){
for(var j=0;j<len;j++){
oli[j].style.backgroundColor='white';
}
this.style.backgroundColor='red';
var a=e||window.event;
if(a.stopPropagation){
a.stopPropagation();
}else{
a.cancelBubble=true;
}
}
}
odiv.onclick=function(){
for(var i=0,len=oli.length;i<len;i++){
oli[i].style.backgroundColor='green';
}
}
}
</script>
<title>无标题文档</title>
</head>

<body>
<div id="div1">
<ul >
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
<li>阿凡达地方阿什顿发</li>
</ul>
</div>
<input type="text" />
</body>
</html>
点击非li外的任何东西变绿
能否说一下过程啊  看不懂这块if(a.stopPropagation){
a.stopPropagation();
}else{
a.cancelBubble=true;
}
}
}
阻止冒泡啊点击非li的元素点击事件冒泡到documentElement 这就和点击了documentElement一样使元素变绿色  阻止冒泡的话点击li就触发li的点击事件  不会触发documentElement的