Javascript 区分focusin和click JQuery事件_Javascript_Jquery_Html_Click_Focus

Javascript 区分focusin和click JQuery事件

javascript jquery html

Javascript 区分focusin和click JQuery事件,javascript,jquery,html,click,focus,Javascript,Jquery,Html,Click,Focus,所以我已经为此挣扎了一段时间了。我有一个输入列表，焦点和点击事件应该根据点击/聚焦的输入更新选择。为此，我使用JQuery <body> <input id="d1" type="text" value="a"> <input id="d2" type="text" value="few"> <input id="d3" type="text" value="words"> </body> 我想要什么单

所以我已经为此挣扎了一段时间了。我有一个输入列表，焦点和点击事件应该根据点击/聚焦的输入更新选择。为此，我使用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键），并将单击的输入添加到选择中
当我输入输入时，如上所述，但始终清除选择
当我使用选项卡遍历输入时，应清除选择，并将当前聚焦的输入添加到选择中

我尝试的

<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>


var stuff={}；
$（文档）.ready（函数（）{
对于（var i=1；i，因为焦点事件总是触发，所以似乎没有现成的方法来区分“仅焦点”和“点击焦点”事件
但是你可以利用这一点，简化你的不同步骤。
步骤1：
因为焦点事件总是首先触发，所以选择删除和使用当前值更新在这里完成。
步骤2：由于满足ctrl条件的单击事件可能会在之后发生，因此我们在删除选择数据之前备份它们
步骤3：单击事件要么在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
  }
});

看小提琴：
这里缺少变革事件——但我希望，你明白我将如何做到这一点；）