如何在 Javascript 中创建“关于模糊”或“将模糊”事件？答案

【问题标题】：How to create an "about To Blur" or "will blur" event in Javascript?如何在 Javascript 中创建“关于模糊”或“将模糊”事件？
【发布时间】：2016-01-05 07:31:41
【问题描述】：

我有一些代码在元素上的“模糊”事件上运行。此代码需要实际使用 activeElement，因此无法从“blur”事件中实际运行。

我希望我可以创建这样的活动。目的是在“blur”事件之前触发“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；你是我唯一的希望。

【问题讨论】：

焦点，focusout

标签： javascript html dom-events

【解决方案1】：

关键是用 addEventListener 代替 JQuery 的 on()，用“mousedown”代替“click”。

代替这一行：

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

我用这个：

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

addEventListener 的最后一个参数：true，表示“在捕获阶段执行此操作”。捕获阶段从最外层的元素开始，并通过在后续子元素上触发事件来工作，然后再开始冒泡阶段，该阶段将返回 DOM 树。

【讨论】：