The Mousepoint event - an alternative to the mouseover event

[Page Notes]

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]

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]

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]

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]

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]

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]

I agree. Though standards are nice, they aren't nice when it means that they limit functionality.

[Page Notes]

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.