Question 282934 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to avoid mouseover event when the user's intent is to click

I have an element which can be hovered & clicked. On hovering of the element, I show a preview of something but on click I need to completely change the content of page based on click event related logic. Now the problem is when user’s intent is to click even then my code is ending up triggering the hover flow because of mouseover event getting triggered first & then the click event. From CX perspective it’s not creating any problem but it’s actually regressing the latency of webpage because of heavy lifting being done on mouseover flow which is effectively useless since user’s intent is to click. One solution I can think of is to wait for some time after mouseover event so that if click event is triggered in the meanwhile, I can drop the hover event. But this solution is not good since it would impact the user’s experience when their intent is to actually hover. Can there be any better way to avoid this through JS/jQuery. I can’t use any external library.
Thanks

Tags:

2

Answers


  1. 0

    There is no way to read user’s mind. So just let the user choose what they want. For an example, you can add a checkbox to turn on/off the hover event, and give a default based on common perference

    Login or Signup to reply.
  2. 0

    On your element, try this css content :

    element{
  cursor: not-allowed;
  pointer-events: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search