區分focusin和click JQuery事件

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 ，因此始終清除選擇。 因此，我嘗試從focusin事件中獲取ctrlKey ，但只有MouseEvents具有ctrlKey屬性。

我的問題

focusin事件是否可能知道click事件之后是否發生？ 還是我使用了錯誤的聽眾？

我已經在Google上搜索了一段時間，但是當我添加focus ，大多數網站都將focus集中在jQuery上，或者檢查某個元素是否被聚焦，所以不幸的是，這沒有讓我更進一步。 我已經找到了，但是我自己也無法從中得出答案：

Answer 1

由於焦點事件始終會觸發，因此似乎沒有開箱即用的方式來區分“僅焦點”事件和“焦點后有點擊”事件

但是您可以通過簡化不同的步驟來利用它。 步驟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
  }
});

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

變更事件在這里不見了-但我希望您能明白我將如何做;）

區分focusin和click JQuery事件

問題描述

1 個解決方案

解決方案1
0 2015-03-17 11:02:37

區分focusin和click JQuery事件

問題描述

1 個解決方案

解決方案1 0 2015-03-17 11:02:37

解決方案1
0 2015-03-17 11:02:37