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

Question

下面这段代码 sn-p 是为了避免在多选框中按住 ctrl-click

但它在 IE 8 中不起作用。

是否有任何解决方法可以在 IE 和其他 IE 版本中实现相同的效果？

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

Answer 1

我在上面的 jQuery 答案中发现了一个主要问题。 $(select) 的 .val() 不会更新。

这是可行的解决方案：

$select.mousedown(function (e) {
    e.preventDefault();
    const select = this;
    const { scrollTop } = select;
    e.target.selected = !e.target.selected;
    setTimeout(function () {
        select.scrollTop = scrollTop;
    }, 0);
}).mousemove(function (e) { e.preventDefault(); });

Answer 2

我不相信有任何方法可以在 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 | 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（作为在这些情况下，浏览器会更好地与用户合作。）。