Question

我正在尝试检测“选择列表”的“更改”事件，就好像来自“鼠标点击”或“标签按下（即焦点丢失）”。此后，我想根据这两个动作做不同的事情。

深入探讨如下：

我在表格行中有一个“选择列表”。每当用户从该列表中选择一个项目时，一些控件（输入，选择等）将动态加载到紧邻的下一个表行内的所述“选择列表”下面。

我想从这里得到的是，如果用户通过键盘从“选择列表”中选择一些项目并按Tab键，焦点应自动转移到动态渲染的第一个控件。类似地，如果用户使用鼠标从“选择列表”中选择项目，则焦点不应移动到任何地方。

以下是我的代码：

$("#mySelectList").bind("change", function (e) {

var selList = $(this);

$.post("/someController/someAction", { paramOne: $(this).val() }, function (result) {

    // ..... //
    // consume "result" and load dynamic controls underneath the "select list"
    selList.closest('tr').next().find("input, select:first-child").focus(); // set focus to the next immediate control

}, 'json');

});

从上面看，使用“tab”时一切正常，但如果用户选择使用鼠标，焦点仍会移动到下一个动态控件，这是不好的。如果用户使用鼠标选择项目，我想只关注“选择列表”。

我也尝试使用“keyup”代替“更改”，但这会导致“选择列表”触发正确的ajax请求，这对于不必要的ajax请求而言是一个问题，同时导航控件说使用“tab tab tab”或“ tab shift + tab tab等等。“

如果你们知道更好的方法来实现这种情况，请告诉我。我也期待在每个现有浏览器下运行的可能解决方案。

期待您的回复。

提前致谢。

Answer 1

我不确定我是否完全理解，但是这样的事情呢？

var curFocus;

$("body *").focus(function(){ curFocus = $(this); });

$("#mySelectList").change(function(){
    var selList = $(this);

    if(curFocus[0] != selList[0]){
       $("#myOtherSelect").focus();
    }
});

从选择列表中检测“更改”事件 - 从鼠标单击或从按键

1 个答案: