Как создать событие «about Blur» или «размыть» в Javascript?

Question

У меня есть код, который запускается при событии «размытие» на элементе. Этот код должен фактически использовать activeElement и, следовательно, не может фактически запускаться из события «размытия».

Я надеялся, что смогу создать такое событие. Цель состояла в том, что событие «willblur» будет срабатывать перед событием «размытия».

var lastTouchedElement; 

    $('body').on('click', preBlurHandler); 
    $('body').on('focusin', postFocusHandler); 
    $('.inp1').on('willblur', function() {alert('willblur');}); 
    $('.inp1').on('blur', function() {alert('blur');}); 


    function preBlurHandler(ev) { 

    if (!lastTouchedElement) { 
     postFocusHandler(ev); 
     return; 
    } 

    var focussingElement = ev.target; 

    if (lastTouchedElement === focussingElement || $.contains(lastTouchedElement, focussingElement)) { 
     //focus is staying in the same place, do nothing 
     return; 
    } 

    $(lastTouchedElement).trigger('willblur', [ev, { 
     target: lastTouchedElement, 
     focussingElement: focussingElement 
    }]); 
    } 


    function postFocusHandler(ev) { 
    lastTouchedElement = document.activeElement; 
    } 

Полный код находится в JSFiddle на https://jsfiddle.net/t0un95jt/3/

Но это не работает. На самом деле это даже не близко.

Помогите мне StackOverflow; ты моя единственная надежда.

Answer 1

Ключ должен был использовать addEventListener вместо JQuery's on() и использовать «mousedown» вместо «click».

вместо этой строки:

$('body').on('click', preBlurHandler); 

Я использую это:

window.addEventListener('mousedown', preBlurHandler, true); 

Последний аргумент для addEventListener: истинно, означает "сделать это на этапе захвата". Фаза захвата начинается с самого внешнего элемента и работает путем запуска события на последующих дочерних элементах, прежде чем начнется этап барботирования, который работает по пути обратно в дерево DOM.