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

Question

我正在寻找一种在IE中的<select>上设置事件的功能，以便在更改项目或再次选择同一项目时将其激活，但不会在按下鼠标时触发。 我也不想强迫用户一直压下鼠标。 他们应该能够单击以打开菜单，而无需触发事件，直到他们真正选择了东西为止。

更改事件是不够的，因为它仅在发生更改时触发，并且正常的单击事件在IE中显得过于激进（显然没有提供任何其他区分性信息，例如不同的nodeName ）。

有任何想法吗？

Answer 1

尝试绑定所有这些：

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

并且，在“焦点”事件之后，绑定到mouseleave *事件，每当用户用鼠标离开选择项时，它就会被触发。 这是为了防止不必要的触发（例如，当仅将鼠标悬停在选择上而不打算单击/更改选择时。应在用户用鼠标选择某项后触发mouseleave，因为下拉菜单通常在单击后缩回。使用键盘导航表单字段的用户可以正常工作。

出于可访问性和可用性的原因，我建议在选择旁边保留一个提交。 并非所有用户都会了解所选内容的自动更新性质，有些用户可能禁用了JS。 同样，键盘用户可能会“跳到”按钮，从而导致所选内容出现模糊事件。

* Mouseleave是仅限Internet Explorer的事件，它不会在内部mouseout事件上触发。 如果您使用的是jQuery，则此事件随所有浏览器一起标准化，在这种情况下，我建议使用mouseleave。 您也可以自己建立这种行为。 我怀疑它确实比mouseout更好用：据我所知，当将select中的可选项目留在mouseout时会触发。 有关更多信息，以及mouseout和mouseleave之间的区别的示例，请访问： http : //api.jquery.com/mouseleave/ ，或者此博客描述了构建自己的mouseleave事件处理程序时遇到的困难： http : //blog.stchur.com/2007 / 03/15 / mouseenter和mouseleaves事件用于Firefox和其他非浏览器浏览器/

祝好运！

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>