模拟select,如何阻止事件冒泡？

模拟select,如何阻止事件冒泡？ 怎么我这里用return false;不起作用的呢？？<!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" />
<title>select</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;}
ul{list-style:none;}
.warp{width:400px; margin:100px auto;}
.selectbox{width:120px; height:25px; line-height:25px; cursor:pointer; border:1px solid #ddd; padding-left:10px; position:relative;}
#txt{display:block; width:120px;height:25px; line-height:25px;}
.select-list{ position:absolute; width:130px; left:-1px; border:1px solid #ddd; top:25px; display:none;}
.select-list li{padding:0 10px; height:30px; line-height:30px; cursor:pointer; overflow:hidden;}
.select-list li:hover{ background:#39F; color:#fff;}
</style>
<script type="text/javascript">
window.onload=function(){
var oList = $('selectList');
var oLi = oList.getElementsByTagName('li');
var oTxt = $('txt');
var oVal = $('val');

oTxt.onclick=function(){
if(oList.style.display=='block'){
oList.style.display='none';
}else{
oList.style.display='block';
}
return false;
}
for(var i=0;i<oLi.length;i++){
oLi[i].onclick=function(){
var str = this.innerHTML;
oTxt.innerHTML = str;
oVal.value = str;
oList.style.display='none';
return false;
}
}

document.onclick=function(){
//alert(0);
oList.style.display='none';
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head><body>
<div class="warp">
    <input type="hidden" value="" id="val"  />
    <div class="selectbox" id="selectBox">
        <span id="txt">请选择</span>
        <ul class="select-list" id="selectList">
            <li>读书</li>
            <li>电影</li>
            <li>音乐</li>
        </ul>
    </div>
</div>
</body>
</html>
事件冒泡javascript;模拟下拉select

解决方案 »

  1.   

    用event.stopPropagation()吧，    oTxt.onclick=function(e){
            if(oList.style.display=='block'){
                oList.style.display='none';
            }else{
                oList.style.display='block';
            }
            e ? e.stopPropagation() : (window.event.cancelBubble = true);
        }
    只测了chrome,ie大概不知道有没错
      

  2.   

    用return false；在这里为什么不行了呢？？以前好像我都是直接用retrun false；都可以的
      

  3.   

    http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false
      

  4.   

    我晕，几年不用csdn，忘了链接还要加标签
      

  5.   


    event.stopPropagation(); // 事件停止冒泡到，即不让事件再向上传递到document，但是此事件的默认行为仍然被执行，如点击一个链接，调用了event.stopPropagation()，链接仍然会被打开。event.preventDefault(); // 取消了事件的默认行为，如点击一个链接，链接不会被打开，但是此事件仍然会传递给更上一层的先辈元素。在事件处理函数中使用 return false; 相当于同时调用了event.stopPropagation()和event.preventDefault()，事件的默认行为不会被执行，事件也不会冒泡向上传递。
    既然 return false；即阻止了事件的默认行为，也阻止了冒泡，但为什么还是不行呢？？
      

  6.   


    event.stopPropagation(); // 事件停止冒泡到，即不让事件再向上传递到document，但是此事件的默认行为仍然被执行，如点击一个链接，调用了event.stopPropagation()，链接仍然会被打开。event.preventDefault(); // 取消了事件的默认行为，如点击一个链接，链接不会被打开，但是此事件仍然会传递给更上一层的先辈元素。在事件处理函数中使用 return false; 相当于同时调用了event.stopPropagation()和event.preventDefault()，事件的默认行为不会被执行，事件也不会冒泡向上传递。
    既然 return false；即阻止了事件的默认行为，也阻止了冒泡，但为什么还是不行呢？？return false；两样都阻止，岂不是像万能一样了。。但为什么用在这里就不行。。还是不明白。。望再指点一下。。谢谢哈。。
      

  7.   

    e.preventDefault() will prevent the default event from occuring, e.stopPropagation() will prevent the event from bubbling up and return false will do both. Note that this behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up.