点击事件在IE中选择只在实际选择项目时触发的项目

Question

我在寻找能够在IE中设置<select>的事件，以便在项目更改或选择了相同项目时激活它再次，但不会触发mousedown。我也不想强迫用户一直保持鼠标不动，他们应该能够点击打开菜单，而不必点燃事件，直到他们真正选择了某种东西。

一个变化事件是不够的，因为它只会在IE发生变化时触发，而且一个正常的点击事件在IE中显得太过分了（显然没有提供任何其他区别信息，例如不同的nodeName）。

任何想法？而对于每当用户改变输入

模糊每当选择失去焦点

• 变化，“聚焦”事件发生后，：

Answer 1

尽量结合所有这些绑定到mouseleave *事件，每当用户用他/她的鼠标离开选择时它都会被触发。这是为了防止不必要的触发（例如，当用户在鼠标上方悬停而无意点击/改变选择时，应该在用户使用鼠标选择某些内容后触发mouseleave，因为下拉后通常会在点击后缩回。对于使用键盘来浏览表单域的用户来说，正常工作可能会有所不同。

对于可访问性和可用性方面的原因，我建议在选择旁边留下一个提交。此外，键盘用户可能会'选项卡'的按钮，导致选择模糊事件。

* Mouseleave是一个Internet Explorer的事件，它不触发内部鼠标事件。 '正在使用jQue ry，它带有所有浏览器的标准化事件，在这种情况下，我建议使用mouseleave。你也可以自己建立这种行为。我怀疑它比mouseout的效果更好：据我所知，在选择内留下可选项目时，会触发mouseout。有关mouseout和mouseleave之间区别的更多信息和示例：http://api.jquery.com/mouseleave/，或者此博客描述构建您自己的mouseleave事件处理程序时遇到的困难：http://blog.stchur.com/2007/03/15/mouseenter-and-mouseleave-events-for-firefox-and-other-non-ie-browsers/

祝您好运！

Answer 2

您可以手动附加一个click事件你的选择和设定目标，例如：

var i, 
    childs_collection = document.getElementById('mySelect').getElementsByTagName('option'), 
    colLength = childs_collection.length; 

    for(i=0; i < colLength; i++) { 

    childs_collection[i].onclick = function(e){ 
     e.target = this; 

     //console.log('e.target = ' + e.target); 
     alert('e.target = ' + e.target.id); 
    }; 
    } 

，如果你使用jQuery就这么简单：

$(function(){ 

    $('select option').click(function(e){ //or $('#mySelect').children('option').cli... 

    alert(e.target.id); 
    //do your stuff here 
    }); 

}); 

HTML：

<select id="mySelect" name="s1"> 
    <option id="o1" value="1">1</option> 
    <option id="o2" >2</option> 
    <option id="o3" >3</option> 
</select>