选择中的选项上的mousedown事件在IE中不起作用，有没有解决方法？

以下代码段是为了避免在多选框中按住Ctrl键单击

但它在IE 8中不起作用。

有没有什么工作可以在IE和其他IE版本中实现相同的目标？

$('option').mousedown(function(e) { e.preventDefault(); $(this).prop('selected', !$(this).prop('selected')); return false; }); 

Answer 1

我不相信有任何方法可以在IE8中的option元素上获取mousedown或click事件。

如果您真的想要您描述的行为，我建议您使用不同的控件，而不是多个select框。 改变标准UI组件的行为通常不是一个好主意，因为用户习惯于他们以某种方式行事，并且当他们在某些应用程序/页面中的行为与其他应用程序/页面中的行为不同时会感到困惑。 如果你想要一个简单的点击，点击行为的列表，那么更好地完成你自己的事情。

您可以通过多项select 来完成此操作，但用户体验非常难看：

 var selected = {}; $('#yourSelectBox').click(function(e) { var $this = $(this), options = this.options, option, value, n; // Find out what option was just added value = $this.val(); // Re-apply the selections for (n = 0; n < options.length; ++n) { option = options[n]; if (option.value == value) { // The one being updated selected[value] = !selected[value]; } // One of the others option.selected = !!selected[option.value]; } return false; }); 

实例 | 资源

但是，这仍然是一个非常丑陋的用户体验。

---

这是一个伪选择的例子： Live Example | 资源

CSS：

 .pseudo-select { border: 1px solid black; width: 200px; } .pseudo-option { cursor: pointer; border: 1px solid #eee; } .pseudo-option.selected { background-color: #33c; color: white; } 

HTML：

 
 
One
 
Two
 
Three
 
Four
 
Five
 
Six
 
Seven
 
Eight
 
Nine
  

使用jQuery的JavaScript：

 $(".pseudo-option").click(function() { $(this).toggleClass("selected"); }); 

这只是我在几分钟内完成的事情，显然还有很大的改进空间，但你明白了。

注意 ：如果您使用这样的东西，您将需要使用辅助技术（屏幕阅读器等）检测移动浏览器和浏览器，并使用正常select （因为浏览器将更好地与用户一起工作）那些情况。）