Question

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

但它在IE 8中不起作用。

在IE和其他IE版本中是否有任何解决方法？

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

Answer 1

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

如果您真的想要您描述的行为，我建议您使用不同的控件，而不是多个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代替（因为浏览器在这些情况下会更好地与用户合作。）。

Answer 2

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

这是可行的解决方案：

$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(); });

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

2 个答案: