如何创建一个“;关于模糊”;或“;将模糊”;事件

How to create an "about To Blur" or "will blur" event in Javascript?

本文关键字：模糊 何创建 事件 于模糊 一个 创建      更新时间：2023-09-26

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

我希望我能创造一个这样的活动。其目的是"willblur"事件将在"blur"事件之前启动。

  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；你是我唯一的希望。

关键是使用addEventListener而不是JQuery的on（），并使用"mousedown"而不是"click"。

而不是这行：

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

我使用这个：

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

addEventListener的最后一个参数：true，意思是"在捕获阶段执行此操作"。捕获阶段从最外层的元素开始，通过在后续子元素上激发事件来完成，然后是冒泡阶段，冒泡阶段返回DOM树。

相关文章：