jquery - select 中选项的 mousedown 事件在 IE 中不起作用，有什么解决方法吗？

Question

下面的代码片段是为了避免在多选框中按住 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 事件。

如果您确实想要您所描述的行为，我建议您使用不同的控件，而不是多个选择框。更改标准 UI 组件的行为通常不是一个好主意，因为用户已经习惯了它们的特定行为方式，并且当它们在某些应用程序/页面中的行为与在其他应用程序/页面中的行为不同时会感到困惑。如果您想要一个具有简单点击、点击关闭行为的列表，最好完全自己做一些事情。

您可以通过多个选择来完成此操作，但用户体验确实很丑陋:

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 | Source

不过，这又是一种非常糟糕的用户体验。

<小时/>

下面是伪选择的示例:Live Example | Source

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:

<div class="pseudo-select">
    <div class="pseudo-option" data-value="1">One</div>
    <div class="pseudo-option" data-value="2">Two</div>
    <div class="pseudo-option" data-value="3">Three</div>
    <div class="pseudo-option" data-value="4">Four</div>
    <div class="pseudo-option" data-value="5">Five</div>
    <div class="pseudo-option" data-value="6">Six</div>
    <div class="pseudo-option" data-value="7">Seven</div>
    <div class="pseudo-option" data-value="8">Eight</div>
    <div class="pseudo-option" data-value="9">Nine</div>
</div>

使用 jQuery 的 JavaScript:

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

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

注意:如果您使用类似的内容，您将需要检测移动浏览器和使用辅助技术(屏幕阅读器等)的浏览器，并使用普通的select 相反(因为在这些情况下浏览器会更好地与用户合作。)。