<html>
    <head>
        <title>Mouse Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n>" + oEvent.type;
                //oTextbox.value += "\n    target is " + oEvent.target.tagName;
                oTextbox.value += "\n    relatedTarget is " + oEvent.relatedTarget.tagName;
                
                
            }
        </script>
    </head>
    <body>
        <p>Use your mouse to click and double click the red square.</p>
        <div style="width: 100px; height: 100px; background-color: red"
             onmouseover="handleEvent(event)"
             onmouseout="handleEvent(event)"
             onmousedown="handleEvent(event)"
             onmouseup="handleEvent(event)"
             onclick="handleEvent(event)"
             ondblclick="handleEvent(event)" id="div1"></div>
        <p><textarea id="txt1" rows="15" cols="50"></textarea></p>
    </body>
</html>

解决方案 »

  1.   

    <html> 
        <head> 
            <title>Mouse Events Example </title> 
            <script type="text/javascript"> 
                function handleEvent(oEvent) { 
                    var oTextbox = document.getElementById("txt1"); 
                    oTextbox.value += "\n>" + oEvent.type; 
                    //oTextbox.value += "\n    target is " + oEvent.target.tagName; 
                    oTextbox.value += "\n    relatedTarget is " + oEvent.srcElement.tagName; 
                    
                    
                } 
            </script> 
        </head> 
        <body> 
            <p>Use your mouse to click and double click the red square. </p> 
            <div style="width: 100px; height: 100px; background-color: red" 
                onmouseover="handleEvent(event)" 
                onmouseout="handleEvent(event)" 
                onmousedown="handleEvent(event)" 
                onmouseup="handleEvent(event)" 
                onclick="handleEvent(event)" 
                ondblclick="handleEvent(event)" id="div1"> </div> 
            <p> <textarea id="txt1" rows="15" cols="50"> </textarea> </p> 
        </body> 
    </html>
    event没relatedTarget这属性.
      

  2.   


    <html> 
        <head> 
            <title>Mouse Events Example </title> 
            <script type="text/javascript"> 
                function handleEvent(oEvent) { 
                    var oTextbox = document.getElementById("txt1"); 
    oEvent = (window.event)?event:oEvent;
                    oTextbox.value += "\n>" + oEvent.type;
                    if(window.event) if(oEvent.toElement) oTextbox.value += "\n    relatedTarget is " + oEvent.toElement.tagName
                    else if(oEvent.relatedTarget) oTextbox.value += "\n    relatedTarget is " + oEvent.relatedTarget.tagName; 
                } 
            </script> 
        </head> 
        <body> 
            <p>Use your mouse to click and double click the red square. </p> 
            <div style="width: 100px; height: 100px; background-color: red" 
                onmouseover="handleEvent(event)" 
                onmouseout="handleEvent(event)" 
                onmousedown="handleEvent(event)" 
                onmouseup="handleEvent(event)" 
                onclick="handleEvent(event)" 
                ondblclick="handleEvent(event)" id="div1"> </div> 
            <p> <textarea id="txt1" rows="15" cols="50"> </textarea> </p> 
        </body> 
    </html>