Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple Mouseover Function

    I'm trying to find an easy way to do make a little function that does the following:

    1.) Detects when the mouse enters over a <div>
    2.) Waits to see if the mouse stays over it for 1000 milliseconds
    3.) If the mouse does, run another function

    The problem I've been running into seems to be from the onmouseover/onmouseout events "bubbling" because there are nested elements in the <div>. I can't find a resource that has successfully told me how to turn off bubbling, or given me an alternative solution. Any suggestions?

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    You can check manually whether event.scrElement (ie) or event.target (other browsers) point to the right element. Or you can cancel the bubbling by adding events on the children that stops propagation.

    Turning off bubbling:
    - The ie way: MSDN: cancelBubble Property
    - Other browsers: W3C DOM2Events: Event: stopPropagation
    Last edited by liorean; 12-12-2007 at 02:02 AM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    onmouseover(" window.tim=setTimeout('myFunction(this)', 1000); "
    onmouseout(" clearTimeout( window.tim); myAlternateFunction(); "
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #4
    New Coder
    Join Date
    Apr 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by liorean View Post
    You can check manually whether event.scrElement (ie) or event.target (other browsers) point to the right element. Or you can cancel the bubbling by adding events on the children that stops propagation.

    Turning off bubbling:
    - The ie way: MSDN: cancelBubble Property
    - Other browsers: W3C DOM2Events: Event: stopPropagation
    Can you give me a quick example of how to do this properly? I've tried using several sources, but no websites actually show you how to use it with an event like mine.

    Here's the basic structure:

    Code:
    var Sidebar = {
      init: function() {
        var bar = document.getElementById("bar");
        bar.onmouseover = function() {
          //mouseover is true
          //pause for 1000 milliseconds
          //if onmouseout hasn't occurred, run nextfunction
        }
        bar.onmouseout = function() {
          //cancel onmouseover.
        }
      },
      nextfunction: function() {
        alert("Open!");
      }
    }
    window.onload = Sidebar.init;
    And rnd me, thanks for the response, but until I solve the bubbling problem, those events do me no good!
    Last edited by roxii; 12-12-2007 at 03:07 AM.

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    </head>
    
    <body><div>
    
    <div id="mrDiv">Mr. Div</div>
    
    <script type="text/javascript">
    
    var mrDiv = document.getElementById("mrDiv");
    
    mrDiv.onmouseover = function() {
      clearTimeout(this.onmouseover.callback.timer);
      this.onmouseover.callback.timer = setTimeout(bundleFunction(this, this.onmouseover.callback), 1000);
    };
    
    mrDiv.onmouseover.callback = function() {
      alert("Hello from Mr. Div!");
    };
    
    mrDiv.onmouseout = function() {
      clearTimeout(this.onmouseover.callback.timer);
    };
    
    function bundleFunction(context, func, args) {
      context = context || null;
      if(typeof func == "string" && context)
        func = context[func];
      if(!args)
        args = [];
      else if(!(args instanceof Array))
        args = [args];
      return function() {
        return func.apply(context, args);
      };
    }
    
    </script>
    </div>
    </body>
    </html>
    Last edited by Trinithis; 12-12-2007 at 05:37 AM. Reason: removed a bug

  • #6
    New Coder
    Join Date
    Apr 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Trinithis View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test</title>
    </head>
    
    <body><div>
    
    <div id="mrDiv">Mr. Div</div>
    
    <script type="text/javascript">
    
    var mrDiv = document.getElementById("mrDiv");
    
    .
    .
    .
    
    </script>
    </div>
    </body>
    </html>
    Thanks a lot for your help! This works, but the timeout is reset every time the mouse moves over a different element nested inside mrDiv, and unfortunately, I need it to not do that. I still can't figure out how to stop the bubbling.


  •  

    Posting Permissions

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