在IE中单击“选择”事件，该事件仅在实际选择项目时触发

Click event on Select in IE which only triggers when actually selecting item

本文关键字：事件 选择 项目 IE 单击      更新时间：2023-09-26

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

一个变化事件是不够的，因为它只有在发生变化时才会触发，而一个正常的点击事件在IE中似乎过于激进(显然没有提供任何其他区分信息，如不同的nodeName)。

任何想法?

尝试绑定所有这些:

    当用户更改输入时
  • 的更改
  • 当选择失去焦点时模糊

并且，在'focus'事件之后，绑定到mouseleave*事件，当用户用他/她的鼠标离开选择时，它被触发。这是为了防止不必要的触发(例如，当只是悬停在选择没有意图点击/改变选择。)Mouseleave应该在用户用他/她的鼠标选择一些东西后触发，因为下拉框通常在点击后收缩。对于使用键盘导航表单字段的用户不能正常工作。

出于可访问性和可用性的原因，我建议在选择旁边留下一个提交。并不是所有的用户都能理解选择的自动更新特性，有些用户可能会禁用JS。此外，键盘用户可能会在按钮上"tab"，导致选择时出现模糊事件。

*Mouseleave是一个仅限ie浏览器的事件，它不会触发内部mouseout事件。如果您使用的是jQuery，那么它附带了针对所有浏览器的标准化事件，在这种情况下，我建议您使用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/

祝你好运!

你可以给你的选项附加一个点击事件，并手动设置目标，例如:

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>
相关文章：