首页 新闻 赞助 找找看

事件冒泡和事件捕获

0
悬赏园豆:10 [待解决问题]

这个要怎么实现点击下拉列表以外的地方执行隐藏下拉列表,而且是一个页面中有多个这个的都能实现?

 

js
liuhuigoing的主页 liuhuigoing | 初学一级 | 园豆:11
提问于:2015-12-08 11:47
< >
分享
所有回答(2)
1

给document.body注册一个click事件,隐藏所有下拉列表。

然后给下拉列表部分注册一个click事件,用e.stopPropagation()方法阻止事件冒泡,这样事件就不会传递到body引发它的click事件了。

逐影 | 园豆:982 (小虾三级) | 2015-12-08 12:24
0

给每个下拉列表控件,当失去焦点 就隐藏下拉列表内容。下拉表控件获得焦点,显示下拉列表内容。

小刺猬001 | 园豆:660 (小虾三级) | 2015-12-08 14:08

我的代码是这样子的:

 1                         <li class="city">
 2                             <button class="bt citySelect" value="">
 3                                 <span>请选择城市</span>
 4                                 <img src="{{StaticServer}}/staticv2/images/country/select-dropdown.png" alt=""/>
 5                             </button>
 6                             <ul class="cityList">
 7                                 {% for city in guider_info.GuiderCity|split_list:"," %}
 8                                 {% if city %}
 9                                 <li class="select">{{city}}</li>
10                                 {% endif %}
11                                 {% endfor %}
12                             </ul>
13                             <span class="error">还未选择城市</span>
14                         </li>

这样可以监听焦点吗?

支持(0) 反对(0) liuhuigoing | 园豆:11 (初学一级) | 2015-12-08 15:20

@liuhuigoing:  我不写前台具体代码我也不懂。我写VC用到下拉列表都是这么个思想处理的。

附:在网上看到的一个省市联动的例子 js代码【我大体能看懂】

        var lmcount;
        var lmcount2;
        lm=new Array();
        lm2=new Array();
        
        lm[0]=new Array("北京辖区","北京市");
        
        lm[1]=new Array("北京辖县","北京市");
……

                lm2[3142]=new Array("图木舒克市","新疆省辖单位");
        
        lm2[3143]=new Array("五家渠市","新疆省辖单位");

        lmcount=345;//全国市的数目
        lmcount2=3144;//全国县的数目
//定义函数:用于联动省 和 市 两级-----
city为市级下拉框的id名,
pro为省下拉框的id 号。 
用法:onChange="changepro('省id名','市id名');"///////
////////////        
        function changepro(city,pro)
        {
        var city=city;
        var pro=document.getElementById(pro).value;
        var i;
        document.getElementById(city).length=1; 
            for (i=0;i<lmcount;i++){
            if (lm[i][1]==pro){ 
            document.getElementById(city).options[document.getElementById(city).length]=new Option(lm[i][0], lm[i][0]);
            }        
            }
        
        } 


//定义函数:用于联动市 和 县 两级----
-county 为县级下拉框的id名,
city为市下拉框的id 号。 
用法:onChange="changecity('市id名','县id名');"///////
////////////        
        function changecity(county,city)
        {
        var county=county;
        var city=document.getElementById(city).value;
        var j;
        document.getElementById(county).length=1; 
            for (j=0;j<lmcount2;j++){
            if (lm2[j][1]==city){ 
            document.getElementById(county).options[document.getElementById(county).length]=new Option(lm2[j][0], lm2[j][0]);
            }        
            }
        
        } 

// JavaScript Document                        
支持(0) 反对(0) 小刺猬001 | 园豆:660 (小虾三级) | 2015-12-08 16:15
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册