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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question onclick handler for complete site

    Quick update:

    Found out how to write a normal event handler, document.onmousedown was the solution, however I had somehow forgotten to actually pass a parameter which messed up things. I now however have the problem, that two events are triggered, the global click and the image click. Is there a possibility to actually only make one fire?

    Thank you
    elimin8tor


    [OLD QUESTION
    Hello,

    I'm trying to figure out how to make an event handler for a whole page, the situation being the following:

    I have a number of different images which all have their event handler which basically sets a variable to the value of the calling ID. So far so good.

    Now the "global" mouse click event handler is supposed to read the x and y position of the mouse and for now just output the position clicked (later on I want to reposition the image there, but I'll come to this later on...)



    I unfortunatly am struggling to find the appropriate position for the second handler reading the mouse position. Any help or further sources are appreciated!

    Thank you
    elimin8tor
    ]
    Last edited by elimin8tor; 12-28-2007 at 10:45 PM. Reason: Partially solved the problem by myself

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Look into
    cancelbubble

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your help so far Eric, unfortunately I have not quite been able to work things out.

    I now actually do have a basic insight into what cancelbubble does and in theory have understood what needs to be done. However, unfortunately I am simply to thickheaded to work out the actual code (might be time for bed at 2:45am local time )

    I have decided, that the most elegant way would be to combine my previously two event-handlers (one for the div elements and one general handler) into a single one. I attached my (simplified) code so far. As can be seen, the problem I really have is that I cannot identify the calling object. Is this just me being stupid? I found a DOM reference for MouseEvent and found the relatedNode/relatedTarget property but it is not filled in my event.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <title>Eventhandler Test</title>
    
    <script type="text/javascript">
    
    var activeDiv = 0;
    var x = 0;
    var y = 0;
    
    function mouseDownHandler(e) {
        if (activeDiv == 0) {
            // here I have to find out which Div fired the event (ID is needed), this is were I really struggle
            
            // afterwards if I understand the stuff I read correctly I stop the event from being "bubbled" up
            // by doing (for cross browser):
            if( e.stopPropagation ) { e.stopPropagation(); }
            e.cancelBubble = true;
        }
        else
        {
            x = e.pageX;
            y = e.pageY;
            // here later a function call would come to process activeDiv, x and y furtherly
        }
    }
    
    document.attachEvent('onmousedown', mouseDownHandler, false);
    
    </script>
    </head>
    <body>
    <div id=1 onmousedown='mouseDownHandler' ..........><img/></div>
    <div id=2 onmousedown='mouseDownHandler' ..........><img/></div>
    </body>
    </html>

    Any ideas?

    Thank you very much, I appreciate it
    elimin8tor


  •  

    Posting Permissions

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