Question

我有一个包含几个<select>列表的设置，允许您根据所选的<options>执行各种功能。最初我在<select>上有一个.change（）事件处理程序，它首先在列表中找到所选元素并相应地更新我的控制按钮的状态。（某些功能应该不适用于列表中的某些项目。）

然而，MSIE＆lt; = 8中.change（）的奇怪行为让我听到了箭头按键和鼠标点击。我以为我差不多了，但似乎所有版本的MSIE至v9至少对待mouseup（）和click（）事件的方式与所有其他浏览器不同。

我有一个小提琴：http://jsfiddle.net/mjbmZ/4/

src转载如下：

HTML：

<select id='select' size='10' multiple='multiple'>
    <option value='asdf'>Opt 1</option>
    <option value='asdf2'>Opt 2</option>
    <option value='asdf3'>Opt 3</option>
</select>

的javascript：

var selectList = $("#select");

var getCurrent = function (e) {
    currentSelections = selectList.find(':selected');
    var vals = [];
    for (var x = 0; x < currentSelections.length; x += 1) {
        vals.push($(currentSelections[x]).html());
    }
    console.log(e, vals.join(', '));
}

selectList.click( function () {
    getCurrent('click: ');
});
selectList.mouseup( function () {
    getCurrent('mouseup: ');
});

当您使用鼠标单击任何选项时，上面的代码会将所选选项的文本记录到控制台......或者它应该是。

在MSIE中.mouseup（）报告最后一次点击前选择的内容。所有其他主流浏览器都做对了。那么为什么不直接使用.click（）呢？

好吧，在所有浏览器中除了MSIE之外，如果在选择多个选项时按住鼠标，则根本不会触发.click（）事件。试一试：将鼠标放在Opt1上，单击，向下拖动，以便用它突出显示另一个选项，然后释放。没有.click（）被解雇了！

无论如何，我希望这是有道理的。我真的想规范浏览器之间的行为，但现在我似乎不得不在：
之间做出选择
1）使用.change（），它没有注册通过MSIE中的键盘选择的选项＆lt; 9

或

2）使用.keyup（）事件+ .click（）或.mouseup（），两者都不能在浏览器之间一致地工作

有人有什么想法吗？

[编辑]

我已放弃所有.keyup()，.mouseup()和.click()事件。浏览器之间的行为太不一致了。我已经回到了.change()，并提出了一个警告：

我为.addEvent执行功能检测，并在此情况下附加'onchange'的侦听器。这解决了我在jQuery的.change()中遇到的所有棘手的问题，当你在以下情况下没有在旧版本的MSIE中解雇：

1）通过键盘进行选择

2）通过点击拖动
进行多重选择
这里有一个更新的小提琴：http://jsfiddle.net/mjbmZ/11/适合任何有兴趣的人。更新后的代码实现如下：

var selectList = $("#select"); var getCurrent = function (e) { currentSelections = selectList.find(':selected'); var vals = []; for (var x = 0; x < currentSelections.length; x += 1) { vals.push($(currentSelections[x]).html()); } console.log(e, vals.join(', ')); } selectList.click( function () { getCurrent('click: '); }); selectList.mouseup( function () { getCurrent('mouesup: '); }); selectList.change( function () { getCurrent('change: '); }); if (selectList[0].attachEvent) { selectList[0].attachEvent('onchange', function () { getCurrent('onchange: '); }); }

如果您使用MSIE＆lt; 9中的键盘进行选择，您可以看到只有'onchange'事件被触发。

Answer 1

我尝试了更改（），它在IE / Mozilla / Chrome中运行

var selectList = $("#select");

var getCurrent = function(e) {
    currentSelections = $("#select :selected");
 vals = [];
    for (var x = 0; x < currentSelections.length; x += 1) {
        vals.push($(currentSelections[x]).html());
    }
    console.log(e, vals.join(', '));
}


selectList.change(function() {
    getCurrent('click: ');
});

这是jsfiddle的链接 http://jsfiddle.net/mjbmZ/5/

在.mouseup（）事件之前，MSIE无法识别所选项目的更新

1 个答案: