0

I want to trigger one handler when an input field is clicked, and another handler when it is deselected (i.e. if someone clicks outside of the field). Is there a way to accomplish this?

The click handler is simple enough:

input onClick={props.clicked}

Is it possible to create an "unclick" handler?

Note: Re-asking/re-answering the question from here, because that question had a React tag, and was consequently tagged as a duplicate because the question had been asked in the context of React, but I was equally curious about how to solve the problem in a non-React context. This question deserves more visibility as a non-duplicate for those looking to solve the problem outside of React.

James Shapiro
  • 4,805
  • 3
  • 31
  • 46
  • By "on unclick", you seem to mean "on click outside", which has been answered many times already (e.g. https://stackoverflow.com/a/3028037/1225328). The answer you gave is about "on blur" though, which is the counterpart of "on focus". "Unclick" could also be seen as "on mouse up", the counterpart of "on mouse down". – sp00m Nov 17 '20 at 16:16

1 Answers1

1

Answer: The onBlur event solves this problem. Thanks to Ran Marciano: HTML onUnclick handler?

James Shapiro
  • 4,805
  • 3
  • 31
  • 46
  • 2
    The even pair you are talking about is called "focus" and "blur". The "click" event does not have an opposite. – Tomalak Nov 17 '20 at 16:02