让IE/Chrome的OPTION支持click事件

losetowin 发布于:2014-11-2 20:04 分类:js/jquery  有 5195 人浏览,获得评论 19 条 标签: option click事件 

本文地址:http://www.dutycode.com/option_click_ie_chrome.html
除非注明,文章均为 www.dutycode.com 原创,欢迎转载!转载请注明本文地址,谢谢。

问题:

      IE以及chrome浏览器下的下拉框option是不支持click事件

描述:

    很多场景下,下拉框选择之后是要有联动事件的,在火狐下面很正常,支持点击事件,但是到了Ie以及chrome下之后,这种点击事件便是无效的了


解决办法:

    方法1:使用onchange事件代替

    Eg:

    

<select onchange="alert(2)">
    <option onclick="alert(1)">1111</option>
</select>
     方法2:

        

function simOptionClick4IE(){
	var evt=window.event  ;    
    var selectObj=evt?evt.srcElement:null;    
    // IE Only    
    if (evt && selectObj &&  evt.offsetY && evt.button!=2    
        && (evt.offsetY > selectObj.offsetHeight || evt.offsetY<0 ) ) {    
            // 记录原先的选中项    
            var oldIdx = selectObj.selectedIndex;    
   
            setTimeout(function(){    
                var option=selectObj.options[selectObj.selectedIndex];    
                // 此时可以通过判断 oldIdx 是否等于 selectObj.selectedIndex    
                // 来判断用户是不是点击了同一个选项,进而做不同的处理.       
                getSecondCate(option.value);
            }, 60);    
    }    
}
 <select  onclick="simOptionClick4IE()" >    
    <option onclick="alert(1)">1111</option>
</select >
参考网址:

    http://blog.csdn.net/jojoy_828/article/details/2553377

http://stackoverflow.com/questions/9972280/onclick-on-option-tag-not-working-on-ie-and-chrome

http://stackoverflow.com/questions/3988938/onclick-in-select-not-working-in-ie

版权所有:《攀爬蜗牛》 => 《让IE/Chrome的OPTION支持click事件
本文地址:https://www.dutycode.com/option_click_ie_chrome.html
除非注明,文章均为 《攀爬蜗牛》 原创,欢迎转载!转载请注明本文地址,谢谢。