鼠标事件（同前一篇键盘事件）

来源：互联网发布：软件考试报名入口编辑：程序博客网时间：2024/05/16 19:13

<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 || oEvent.srcElement).id;
                oTextbox.value += "/n    at (" + oEvent.clientX + "," + oEvent.clientY + ") in the client";
                oTextbox.value += "/n    at (" + oEvent.screenX + "," + oEvent.screenY + ") on the screen";
                oTextbox.value += "/n    button down is " + oEvent.button;

                var arrKeys = [];
                if (oEvent.shiftKey) {
                    arrKeys.push("Shift");
                }

                if (oEvent.ctrlKey) {
                    arrKeys.push("Ctrl");
                }

                if (oEvent.altKey) {
                    arrKeys.push("Alt");
                }

                oTextbox.value += "/n    keys down are " + arrKeys;

            }
        </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>