how to check clicked button in react js

selvi jp

Hi,

I want mouseover,mouseout and onclick function for same button.

if i hover image2 display if i hoverout image1 display.if i click image2 will display.the issue is i click the button image2 display but after click also i want to display same image2.but that time mouseout function is execute so after mouseout image1 will display.This is same as like function in facebook.default transparent thumbsup sympol .if i hover blue color thumbsup sympol will appear.if i click blue color thumbs up sympol will appear

.I want if condition for the button.if i click button status is false then only mouseout will work.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ganesan C5y ago
If you add mouseout event then it will call even if you called click event. It is default behaviour. You cant skip mouseout event if you called click event. We can resolve by progematically only. Thats why i am using one boolean varaible and check inside mouse event . The boolean check will prevent from logic from mouseout event.
+1
selvi jp5y ago
Its working but if i click it will true at the time if i mouseout that function will call so the button will false. that is the issue .after click mouse out is working.how can i stop this
+1
Ganesan C5y ago
Hi try below code. Here i have printed text in console. You can change with your image changes logic.
export const Test = () => {

  const [isClick, setClick] = useState(false);

  function onClick() {
    console.log("onClick");
    setClick(!isClick);
  }

  function onHover() {
    console.log("onHover");
  }

  function onLeave(e) {
    if (!isClick)
      console.log("onLeave");
  }


  return (
    <>
      "btnClick" onMouseOver={onHover} onMouseLeave={onLeave} onClick={onClick}>
        Click Here

  )
}
+1