SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onmousemove and ondblclick

    can someone explain how i can use an ondblclick event to cancel an onmousemove event?

    would I use cancelBubble for this?

    i have a statement in my header
    document.onmousemove = updateMouseCoordinates;
    that moves a sentence of text around the screen.

    when i try to call a function using ondblclick event in the <p> tag, it fails to call function. without statement above, the function is called....

    my purpose is to just cancel the onmousemove in event user performs a double click.

    Can someone advise? thanks!

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bowersdv View Post
    i have a statement in my header
    document.onmousemove = updateMouseCoordinates;
    that moves a sentence of text around the screen.

    when i try to call a function using ondblclick event in the <p> tag, it fails to call function. without statement above, the function is called....
    Those two events should not interfere. Code?
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    function updateMouseCoordinates()
    {
    pText.style.left = event.x;
    pText.style.top = event.y;

    }

    function mDoubleClick(value)
    {
    alert("You Doubleclicked");

    if ( value )
    event.cancelBubble = true;

    }

    document.onmousemove = updateMouseCoordinates;

    // -->
    </script>
    </head>

    <body>

    <p id="pText" style="position: absolute">This is moving text.</p>

    </body>
    </html>

    thanks for the quick response!

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Clearly we're talking I.E. - only, which under some circumstances reports pixels off by 2, so your text isn't positioned under the cursor.

    Try
    Code:
    function updateMouseCoordinates()
    {
     pText.style.left = event.x - 2;
     pText.style.top = event.y - 2;
    }
    Tab-indentation is a crime against humanity.

  5. #5
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you are right about that. i noticed it as well.

    subtracting 2 didn't work, text still appears to bottom...

    i even tried putting ondblclick event in <body> tag and nothing....weird.

  6. #6
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, i left out the ondblclick event before...

    <p id="pText" style="position: absolute" ondblclick="mDoubleClick()">This is moving text.</p>

  7. #7
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i had to make it

    event.y - 20, to get the text positioned right.
    now the function gets called...

    the alert comes up, but

    event.cancelBubble doesn't seem to do anything to stop the onmousemove event....

  8. #8
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bowersdv View Post
    sorry, i left out the ondblclick event before...

    <p id="pText" style="position: absolute" ondblclick="mDoubleClick()">This is moving text.</p>
    This works on I.E.7
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>TEST</title>
    
    <script type='text/javascript'>
    
    function updateMouseCoordinates()
    {
     pText.style.left = event.x - 2;
     pText.style.top = event.y - 2;
    }
    
    function mDoubleClick(value)
    {
    alert("You Doubleclicked");
    
    if ( value )
    event.cancelBubble = true;
    
    }
    
    document.onmousemove = updateMouseCoordinates;
    
    // -->
    </script>
    </head>
    
    <body>
    
    <p id="pText" style="position: absolute">This is moving text.</p>
    
    <script type='text/javascript'>
    
    document.getElementById('pText').ondblclick = mDoubleClick;
    
    </script>
    
    
    </body>
    </html>
    Tab-indentation is a crime against humanity.

  9. #9
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there a way to terminate the onmousemove event though? it does work, the alert comes up, but then im able to continue moving the text with mouse.

    i can always reset the x and y coordinates back to 0 but then it will continue to move...

  10. #10
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    figured it out...

    the statement
    document.onmousemove = null;............terminates the onmousemove event.
    i added it to the function called by ondblclick.

    thank you for your help. the adjustments to the pixels was a big help.

    take care.
    Derek


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
  •