PDA

View Full Version : The Mousepoint event - an alternative to the mouseover event



Page Notes
07-28-2010, 09:12 PM
1) CODE TITLE: The Mousepoint Event

2) AUTHOR NAME/NOTES: Jim Williams/Page Notes

3) DESCRIPTION: The mouse-point event is the first half of the point-and-click gesture; the event occurs when the mouse stops moving and points to a new target. This event is preferable to the mouseover event for use in heavily populated tool tips and nested menus, since use of the mouseover event causes a flurry of unintended activity as the the mouse crosses over irrelevant material before getting to a desired element or menu. This page presents a rationale, demo, specification, and multi-browser implementation for the mousepoint event.

4) URL TO DEMO AND CODE:
http://pagenotes.com/javascript/mousePointEvent.htm

azoomer
07-29-2010, 07:40 AM
It is a very interesting script you have made. It should should be very useful in many applications. Reminds me somewhat of the hoverIntent plugin for jquery, but without the need for a large library. I will definitely try it out. Nice

djr33
07-29-2010, 01:58 PM
Interesting, but seems complex to use. Why not just use mouseover with a delayed reaction of .5 seconds? This could be built into the function.
I'm not saying your script is bad (in fact it seems very good), but since it isn't natively compatible, it makes things a little difficult.

Page Notes
07-30-2010, 02:01 AM
djr33, I appreciate the feedback, I'm not familiar with the term "natively compatible," could you kindly say a little more? My first version of this idea was exactly what you suggest, a delayed mouseover. But in working with that, I found interspersed with the rest of my code, stuff that looked suspiciously like a reinvention of event bubbling. So I'm hoping to get cleaner, better-factored code by recasting the delayed mouseover as a true event.

djr33
07-30-2010, 02:40 AM
I just meant that it isn't already part of the systems and adding extra code in a slightly awkward way is harder. I don't doubt that you did it as well as it can be done, but not being able to use this sort of thing directly makes using it at all difficult.

What I imagine is just a simple function with a callback:
<element onmouseover="hoverdelay('myfunction',10);">....</element>

Then hoverdelay() is a function that waits at least 10 miliseconds before firing the function called myfunction().

It isn't as elegant as yours, but it serves the same purpose and it is more direct. There is no way to use your code so directly (since the browsers won't allow it), and that seems like the main (potential) problem.


I'm also not claiming this won't be useful for some people. But creating a new "event" isn't the only way to approach this.


Here's another idea, and this is completely beyond my knowledge of Javascript...
Is it possible to create a page-wide delay on mouseover? That is, add something like a 10 milisecond delay before firing any onmouseover event. I imagine this might be possible using document.onmouseover and checking what element the mouse is on then waiting to allow the local event to fire, if there is one. I've seen scripts vaguely like this (using global properties like that), but never anything with this specific approach... is it possible?

I think that might be a very helpful version of this, since it would then be very easy to implement and it would be (probably) completely backwards compatible.

Page Notes
07-30-2010, 02:52 AM
Thanks, I see what you're saying. I look forward to HTML5, where I may be able to implement something like <element data-onmousepoint="myHandler()">...</element>

djr33
07-30-2010, 04:24 AM
I agree. Though standards are nice, they aren't nice when it means that they limit functionality.

Page Notes
09-06-2010, 07:44 PM
I added use-capture events. Illustrated them with a multi-layer underline example. Added a log function to help document use-capture. Made minor edits to the code and documentation. URL for the current version is
http://pagenotes.com/mousepoint/mousepointEvent.htm

[QUOTE=Page Notes;232804]
CODE TITLE: The Mousepoint Event

AUTHOR NAME/NOTES: Jim Williams/Page Notes

DESCRIPTION: The mouse-point event is the first half of the point-and-click gesture; the event occurs when the mouse stops moving and points to a new target. This event is preferable to the mouseover event for use in heavily populated tool tips and nested menus, since use of the mouseover event causes a flurry of unintended activity as the the mouse crosses over irrelevant material before getting to a desired element or menu. This page presents a rationale, demo, specification, and multi-browser implementation for the mousepoint event.