2018年5月12日 星期六

[JavaScript] 偵測元件外的點擊事件(Outclick)

有些元件需要偵測在自身以外發生的點擊事件,通常依此進行失焦。
基本原理是偵測document的點擊事件,在事件參數ev中有個事件目標ev.target,顯示了點擊事件的目標元件。從這個事件目標開始往父元件搜尋,若沒比對到註冊事件的元件的話,就觸發監聽器。
暫且把這個事件稱作外點擊事件Outclick。
===
document.onOutclickedListeners = [];
document.addEventListener("click", function (ev) {
    var listeners = $.extend(true, [], document.onOutclickedListeners);
    var target = ev.target;
    do {
        for (var l = 0; l < listeners.length; ++l) {
            var listener = listeners[l];
            if (listener.element === target) {
                listeners.splice(l, 1);
            }
        }
        target = target.parentNode;
    } while (target);
    for (var listener of listeners) {
        listener.func(ev);
    }
});
===.

[HTML] ribody

怕自己忘記,稍微紀錄一下。 各種各種理由(其中一個就是Vue,不能綁定在body上),導致時常需要一個包在body中的div,當作body來用,像這樣: === <body>     <div id="divBody">   ...