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

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

有任何想法吗?

===============>>#1 票数: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和其他非浏览器浏览器/

祝好运!

===============>>#2 票数:0

您可以将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>

  ask by Brett Zamir translate from so

未解决问题?本站智能推荐: