Question

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

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

有什么想法吗？

Answer 1

尝试绑定所有这些：

每当用户更改输入时进行更改
模糊

并且，在'焦点'事件之后，绑定到mouseleave *事件，只要用户使用他/她的鼠标离开选择，它就会被触发。这是为了防止不必要的触发（例如，当只是将鼠标悬停在选择上而无意点击/更改选择时。应该在用户用他/她的鼠标选择内容后触发mouseleave，因为下拉通常在点击后缩回。适用于使用键盘导航表单字段的用户。

出于可访问性和可用性的原因，我建议在select旁边留下提交。并非所有用户都能理解您的选择的自动更新性质，有些用户可能会禁用JS。此外，键盘用户可能会“选择”按钮，导致选择上的模糊事件。

* Mouseleave是仅限Internet Explorer的事件，不会触发内部mouseout事件。如果您正在使用jQuery，它会为所有浏览器规范化此事件，在这种情况下，我建议使用mouseleave。您也可以自己构建此行为。我怀疑它确实比mouseout工作得更好：据我所知，mouseout会在select中留下可选项时触发。有关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

您可以将点击事件附加到您的选项并手动设置目标，例如：

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>

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

2 个答案: