Question

我已经有了一个设置, 由多个 lt; select> 列表组成, 允许您在 lt; options> 列表中执行不同功能, 取决于选择的大小。最初我在 lt; select> 上设置了一个. change () 事件处理器, 它将首先在列表中找到选中的元素, 并相应更新我控件按钮的状态。 ( 对于列表中的某些项目, 将无法使用某些特性 ) 。

然而,在 MSIE< =8 中,. change () 的奇怪行为导致我监听箭头键按键和鼠标点击。我以为我快到了, 但似乎所有版本的 MSIE 通过 v9 至少处理鼠标( ) 和单击( ) 事件都不同于所有其他浏览器。

我这里有个小提琴:http://jsfiddle.net/mjbmZ/4/

具有下述弧弧的弧度:

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>

笔记本:

var selectList = $("#select");

var getCurrent = function (e) {
    currentSelections = selectList.find( :selected );
    var vals = [];
    f或 (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 () 中, 报告最后单击之前选择的 < em> 。所有其他主要浏览器都是正确的。那么为什么不对所有浏览器使用. kick ()?

在所有浏览器 Excepte MSIE 中, 如果您在选择多个选项时按住鼠标, 点击 () 事件不会点火。尝试它: 将鼠标放在 Opt1 上, 单击, 拖放下来, 以便用它突出显示另一个选项, 然后释放。 no. kick () 发射!

不管怎么说,我希望这说得通。我真的很想让浏览器之间的行为正常化, 但现在我似乎不得不在以下两个方面做出选择:

1) 使用. change (), 因为它没有登记在 MSIE< 9 中通过键盘选中的选项。

或

2) using .keyup() events + .click() 或 .mouseup(), neither of which w或k consistently between browsers

有人有什么想法吗?

<强 > [EDIT]

I have dropped all the .keyup(), .mouseup(), and .click() events. The behavi或 is simply too inconsistent between the browsers. I have reverted to .change(), with a caveat:

I do a feature detection f或 .addEvent and attach a listener f或 onchange in that case. This resolves all the spotty issues I had with jQuery s .change() not firing in older versions of MSIE in when you:

(1) 通过键盘进行选择

(2) 2) 使用单击拖放, 做了多个选择。

There is an updated fiddle here: http://jsfiddle.net/mjbmZ/11/ f或 anyone who is interested. The updated code is implemented like this:

var selectList = $("#select");

var getCurrent = function (e) {
    currentSelections = selectList.find( :selected );
    var vals = [];
    f或 (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< 9 键盘中移动选中的键盘, 您可以看到只有更改事件才会被打开。

Answer 1

我在IE/Mozilla/Chroome中尝试过更改(),

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:  );
});

Here s the link to the jsfiddle http://jsfiddle.net/mjbmZ/5/

友情链接