Results 1 to 8 of 8

Thread: The Mousepoint event - an alternative to the mouseover event

  1. #1
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default The Mousepoint event - an alternative to the mouseover event

    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

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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

  3. The Following User Says Thank You to azoomer For This Useful Post:

    Page Notes (07-30-2010)

  4. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. The Following User Says Thank You to djr33 For This Useful Post:

    Page Notes (07-30-2010)

  6. #4
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by Page Notes; 07-30-2010 at 02:27 AM.

  7. #5
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Last edited by djr33; 07-30-2010 at 02:51 AM.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  8. The Following User Says Thank You to djr33 For This Useful Post:

    Page Notes (07-30-2010)

  9. #6
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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>

  10. #7
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    I agree. Though standards are nice, they aren't nice when it means that they limit functionality.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  11. #8
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Mousepoint Event Update

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •