Question

所以我现在一直在努力解决这个问题。我有一个输入列表，焦点和点击事件应该根据点击/聚焦的输入更新选择。我为此使用JQuery。

<body>
    <input id="d1" type="text" value="a">
    <input id="d2" type="text" value="few">
    <input id="d3" type="text" value="words">
</body>

我想要什么

当我点击一个输入时，应该清除一个选择（如果CTRL 不按下），并且点击的输入应该被添加到选择中。
当我输入输入时，与上面相同，但始终清除选择
当我使用TAB遍历输入时，应清除选择，并将当前聚焦的输入添加到选择中。

我尝试了什么

<script type="text/javascript">
    var stuff = {};

    $(document).ready(function () {
        for (var i = 1; i <= 3; i++) {
            var selector = "#d" + i;
            $(selector).on({
                "focusin": function(event) { 
                    stuff = {}; 
                    stuff[selector] = true;
                },
                "click": function(event) { 
                    if (!event.ctrlKey) { 
                        stuff = {};
                    } 
                    stuff[selector] = true;
                }
            });
        }
    });
</script>

但是，click会导致focusin，因此始终会清除选择。所以我尝试从ctrlKey事件中获取focusin，但只有MouseEvents具有ctrlKey属性。

我的问题

focusin事件是否有可能知道它后面是click事件？或者我使用了错误的听众？

我已经在谷歌搜索了一段时间，但是当我添加focus时，大多数网站都是关于使用jQuery聚焦一个元素，或者检查一个元素是否聚焦，所以不幸的是，没有＃39}不要再告诉我了。我发现了这一点，但我无法为自己提取答案：

Answer 1

由于焦点事件总是触发，似乎没有开箱即用的方式来区分“仅焦点”和“焦点跟随点击”事件

但您可以利用这一点，简化您的不同步骤。步骤1：由于始终首先触发焦点事件，因此在此处完成选择删除和使用当前值的更新。步骤2：由于遇到ctrl条件的点击事件，之后可能会发生，我们会在删除之前备份选择数据步骤3：click事件或者在ctrl条件下恢复备份的选择，或者只是删除备份。（因为它已在焦点事件中更新）

代码中的

意味着：

var stuff = {};    //empty global stuff object
var oldStuff = {}; //empty global backup object

$('input').on({
  "focusin": function (event) {
    oldstuff = stuff; // backup your stuff
    stuff = {};       // delete your stuff
    stuff[$(this).attr('id')] = $(this).val();  // get the current value
    console.log("focussed stuff");
    console.log(stuff); // show it in console
  },
  "click": function (event) {
    if (event.ctrlKey) { // if ctrl key was used
        $.extend(stuff, oldstuff); // merge oldstuff back into stuff
    } else if (!event.ctrlKey) {
        oldstuff = {};  // else delete oldstuff
    }
    console.log("clicked stuff");
    console.log(stuff); // show stuff
  }
});

看小提琴：http://jsfiddle.net/eL19p27L/2/

此处缺少更改事件 - 但我希望，您明白我将如何做到这一点;）

区分focusin和单击JQuery事件

1 个答案: