使用 jquery .on 选择选项时的 mousedown 事件

Question

我正在阅读documentation of the .on event handler of jQuery 并开始使用它。

我有一个简单的 元素，其中multiple 属性设置为true。 但是，我希望用户能够选择多个项目而无需按 ctrl 或 shift 键

根据 .on 文档，如果您指定一个选择器，它将自动将这些事件处理程序添加到该容器内添加的与指定选择器匹配的任何新项目。

因此，就我而言，例如，我可以决定替换列表框中可用的 元素，但我仍然希望这些选项具有相同的功能，而不必重新绑定这些事件等。

有人可能认为以下 sn-p 应该可以解决问题（至少，我做到了）：

$('#dropdownlist').on('mousedown', 'option', function(e){
    e.preventDefault();
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    return false;
});

因此，当用户单击该列表框中的选项时，默认操作将被取消，并且根据该项目是否已被选中，它将反转该选择。

我创建了一个小小提琴来展示这种行为：fiddle

在那个小提琴中，第一个下拉列表的行为符合预期，但是在替换项目时功能会丢失。这仅适用于 FF 和 Chrome。

第二个下拉列表是我认为应该的（事件处理明智的），但除了在 Chrome 中之外，这似乎不起作用 -.- 替换项目时会保留该功能，因为在替换项目后单击项目时控制台仍会记录“2”。

有人能解释一下为什么会这样吗？难道我做错了什么？ 请指出正确的方向！

谢谢！

~德克

Answer 1

IE 不尊重选项标签本身的 mousedown 事件。您必须使用选择标签的 OnChange 事件，这不是您（也不是我）想要的。我正试图做和你完全相同的事情，但每次尝试都被阻止了。我终于放弃了，把它变成了一个复选框列表，因为我可以从我的行为中得到与你在这里尝试做的相同的行为。

您可以在this question 中看到一些选项，但我从来没有按照您描述的方式使用它。