How can I know which event caused a blur event in jQuery?

Blur event triggered using click or tab etc. How can I know this blur event is due to click or tab?

How can I know which event caused a blur event in jQuery?

Blur event triggered using click or tab etc. How can I know this blur event is due to click or tab?

• javascript
• jquery

• 9 Why do you need to know? – mplungjan Commented Jun 20, 2011 at 12:40
• 5 .. because there might be more elegant solutions for it? – Arend Commented Jun 20, 2011 at 12:46
• 3 @genesis Find out why often flushes out XY problems. See meta.stackexchange.com/q/66377/134327 – Shawn Chin Commented Jun 20, 2011 at 12:49
• 2 asking for the "why" is perfectly acceptable here – Pekka Commented Jun 20, 2011 at 12:51
• 2 Accessibility -- user used tab or shift-tab to blur, and you want the element to behave differently if the user moved from the parent to the child (say tabbing into a menu) than if the user moved from the child to the parent (tabbing out of the menu). – Alex Leibowitz Commented May 28, 2019 at 20:05

3 Answers 3

If you are trying to do two different things depending on which method was used, bind handlers to listen for .click() and .keyup(), then check for the keycode

var k = (window.event) ? event.keyCode : e.keyCode;

Or something on the order of this if you need

$(document).bind("click keyup", function(){
   //check keycode
   var e = (window.event);
   var k = (e)?event.keyCode:e.keyCode;
   if(k==9){
      //tab code
   }else if(e.type=='click'){
      //click code
   }

});

To be able to handle the type of input from within the blur handler, you will need to use mousedown and keydown events instead. This is due to the order of events.

When you have a text input focused and you click elsewhere on the page, the order will be:

• mousedown
• input blur
• mouseup
• click

Similarly, with a tab, it is

• keydown
• input blur
• keyup

You would need to store the "blur action" in an external variable so the blur handler can access it.

var _lastAction = "somethingelse";
$(document).bind("mousedown keydown", function () {
  //check keycode
  var e = window.event;
  var k = e ? event.keyCode : e.keyCode;
  if (k == 9) {
    //tab code
    _lastAction = "tab";
  } else if (e.type == "mousedown") {
    //click code
    _lastAction = "click";
  } else {
    _lastAction = "somethingelse";
  }
});

Then you can refer to the variable inside of your blur event handler.

I had to use this to maintain proper tabbing in a complicated dynamic form when pressing the tab. I had to check for click because trying to click/focus on a new spot in the form outside of tab order flow would still trigger the tab action, which would focus completely on the wrong element from what you were trying to click on.

Here comes the react TS hook version from 2022 (demo at the end of this answer)

the usage

• app.tsx

import { useHowYouBlur, BlurType } from "./useHowYouBlur";

const handleBlurBy = (type: BlurType) => {
  console.log(type);
};

const { ref } = useHowYouBlur({ onBlurBy: handleBlurBy });

<input ref={ref} />

the hook:

• useHowYouBlur.tsx

import {
  useEffect,
  RefObject,
  useCallback,
  KeyboardEvent,
  useRef,
  useState
} from "react";

export type BlurType = "tab" | "click";
export interface UseHowYouBlurReturn {
  ref: RefObject<any>;
}
export interface UseHowYouBlurProps {
  onBlurBy: (type: BlurType) => void;
}

export const useHowYouBlur = ({
  onBlurBy
}: UseHowYouBlurProps): UseHowYouBlurReturn => {
  const [isBlurByTab, setIsBlurByTab] = useState<boolean>(false);
  const ref = useRef<any>(null);

  const keydownHandler = useCallback(
    (e: KeyboardEvent<HTMLElement>) => {
      if (e.keyCode === 9) {
        setIsBlurByTab(true);
        onBlurBy("tab");
      }
    },
    [onBlurBy]
  );

  const blurHandler = useCallback(() => {
    if (!isBlurByTab) {
      onBlurBy("click");
    }
    setIsBlurByTab(false);
  }, [isBlurByTab, onBlurBy]);

  useEffect(() => {
    const node = ref.current;
    node.addEventListener("keydown", keydownHandler, true);
    return (): void =>
      node.removeEventListener("keydown", keydownHandler, true);
  }, [keydownHandler]);

  useEffect(() => {
    const node = ref.current;
    node.addEventListener("blur", blurHandler, true);
    return (): void => node.removeEventListener("blur", blurHandler, true);
  }, [blurHandler]);

  return { ref };
};

https://codesandbox.io/s/demo-how-you-blur-251op3?file=/src/App.tsx:250-268