JavaScript Tutorial/Event/Mouse Event

Материал из Web эксперт
Версия от 18:52, 25 мая 2010; (обсуждение)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Display current mouse position in status bar (IE)

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function clicked()
{
    window.status = "You clicked at the coordinates: X = " + event.x + " Y = " + event.y
}
//  -->
</script>
</head>
<body onmousedown="clicked()">
</body>
</html>


Get mouse clicked button

<html>
<head>
<title>Mouse Events Example</title>
<script type="text/javascript">
    function handleEvent(oEvent) {
        var oTextbox = document.getElementById("txt1");
        oTextbox.value += "\n    button down is " + oEvent.button;
    }
</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"
     onclick="handleEvent(event)"
     id="div1"></div>
<P><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>


Get mouse client X and Y

<html>
<head>
<title>Mouse Events Example</title>
<script type="text/javascript">
    function handleEvent(oEvent) {
        var oTextbox = document.getElementById("txt1");
        oTextbox.value += "\n    at (" + oEvent.clientX + "," + oEvent.clientY + ") in the client";
    }
</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"
     onclick="handleEvent(event)"
     id="div1"></div>
<P><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>


Get mouse screen X and Y

<html>
<head>
<title>Mouse Events Example</title>
<script type="text/javascript">
    function handleEvent(oEvent) {
        var oTextbox = document.getElementById("txt1");
        oTextbox.value += "\n    at (" + oEvent.screenX + "," + oEvent.screenY + ") on the screen";
    }
</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"
     onclick="handleEvent(event)"
     id="div1"></div>
<P><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>


Get X/Y screen position (IE)

<html>
<head>
<title>X/Y Marks the Spot</title>
<script type="text/javascript">
function mouseDown(nsEvent) {
  var theEvent = nsEvent ? nsEvent : window.event;
  var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
  alert(locString);
}
document.onmousedown=mouseDown;
</script>
</head>
<body>
</body>
</html>


Is alt key pressed during the mouse click

<html>
<head>
<title>Mouse Events Example</title>
<script type="text/javascript">
    function handleEvent(oEvent) {
        var oTextbox = document.getElementById("txt1");
        oTextbox.value += "\n    button down is " + oEvent.button;
        var arrKeys = [];
        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"
     onclick="handleEvent(event)"
     id="div1"></div>
<P><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>


Is control key pressed during the mouse click

<html>
<head>
<title>Mouse Events Example</title>
<script type="text/javascript">
    function handleEvent(oEvent) {
        var oTextbox = document.getElementById("txt1");
        oTextbox.value += "\n    button down is " + oEvent.button;
        var arrKeys = [];
        if (oEvent.ctrlKey) {
            arrKeys.push("Ctrl");
        }
        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"
     onclick="handleEvent(event)"
     id="div1"></div>
<P><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>


Is Shift key pressed during the mouse click

<html>
<head>
<title>Mouse Events Example</title>
<script type="text/javascript">
    function handleEvent(oEvent) {
        var oTextbox = document.getElementById("txt1");
        oTextbox.value += "\n    button down is " + oEvent.button;
        var arrKeys = [];
        if (oEvent.shiftKey) {
            arrKeys.push("Shift");
        }
        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"
     onclick="handleEvent(event)"
     id="div1"></div>
<P><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>


Mouse event from and to elements (IE)

<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.srcElement.tagName;
                if (oEvent.fromElement) {
                    oTextbox.value += "\n    fromElement is " + oEvent.fromElement.tagName;
                }
                if (oEvent.toElement) {
                    oTextbox.value += "\n    toElement is " + oEvent.toElement.tagName;
                }

            }
        </script>
    </head>
    <body>
        <P>Use your mouse to click click the red square and move out.</p>
        <div style="width: 100px; height: 100px; background-color: red"
             onmouseout="handleEvent(event)"
             onclick="handleEvent(event)"
             id="div1"></div>
        <P><textarea id="txt1" rows="15" cols="50"></textarea></p>
    </body>
</html>


Mouse event related element (Firefox)

<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"
             onmouseout="handleEvent(event)"
             onclick="handleEvent(event)"
             id="div1"></div>
        <P><textarea id="txt1" rows="15" cols="50"></textarea></p>
    </body>
</html>


Mouse event target element name

<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.srcElement.tagName;
                if (oEvent.fromElement) {
                    oTextbox.value += "\n    fromElement is " + oEvent.fromElement.tagName;
                }
                if (oEvent.toElement) {
                    oTextbox.value += "\n    toElement is " + oEvent.toElement.tagName;
                }

            }
        </script>
    </head>
    <body>
        <P>Use your mouse to click click the red square and move out.</p>
        <div style="width: 100px; height: 100px; background-color: red"
             onmouseout="handleEvent(event)"
             onclick="handleEvent(event)"
             id="div1"></div>
        <P><textarea id="txt1" rows="15" cols="50"></textarea></p>
    </body>
</html>


onclick mouse event handler

<html>
    <head>
        <title>Mouse Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n" + oEvent.type;
            }
        </script>
    </head>
    <body>
        <P>Use your mouse to click and double click the black square.</p>
        <div style="width: 200px; height: 200px; background-color: black"
             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="35" cols="50"></textarea></p>
    </body>
</html>


ondblclick mouse event handler

<html>
    <head>
        <title>Mouse Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n" + oEvent.type;
            }
        </script>
    </head>
    <body>
        <P>Use your mouse to click and double click the black square.</p>
        <div style="width: 200px; height: 200px; background-color: black"
             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="35" cols="50"></textarea></p>
    </body>
</html>


onmousedown event handler

<html>
    <head>
        <title>Mouse Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n" + oEvent.type;
            }
        </script>
    </head>
    <body>
        <P>Use your mouse to click and double click the black square.</p>
        <div style="width: 200px; height: 200px; background-color: black"
             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="35" cols="50"></textarea></p>
    </body>
</html>


onmouseout event handler

<html>
    <head>
        <title>Mouse Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n" + oEvent.type;
            }
        </script>
    </head>
    <body>
        <P>Use your mouse to click and double click the black square.</p>
        <div style="width: 200px; height: 200px; background-color: black"
             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="35" cols="50"></textarea></p>
    </body>
</html>


onmouseover event handler

<html>
    <head>
        <title>Mouse Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n" + oEvent.type;
            }
        </script>
    </head>
    <body>
        <P>Use your mouse to click and double click the black square.</p>
        <div style="width: 200px; height: 200px; background-color: black"
             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="35" cols="50"></textarea></p>
    </body>
</html>


onmouseup event handler

<html>
    <head>
        <title>Mouse Events Example</title>
        <script type="text/javascript">
            function handleEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value += "\n" + oEvent.type;
            }
        </script>
    </head>
    <body>
        <P>Use your mouse to click and double click the black square.</p>
        <div style="width: 200px; height: 200px; background-color: black"
             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="35" cols="50"></textarea></p>
    </body>
</html>


Set element"s pixelTop and pixelLeft to current mouse event (IE)

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function moved()
{
    window.status = "Current mouse coordinates: X = " + event.x + " Y = " + event.y
    follower.style.pixelTop = event.y
    follower.style.pixelLeft = event.x
}
//  -->
</script>
</head>
<body onmousemove="moved()">
<p id="follower" style="position:absolute">Squeak!</p>
</body>
</html>


Use mouse in/out action to trigger the style change

<html>
<head>
<title>Style Example</title>
</head>
<body>
<P>Move your mouse over the square.</p>
<div id="div1"
     style="background-color: red; height: 50px; width: 50px"
     onmouseover="this.style.backgroundColor = "blue""
     onmouseout="this.style.backgroundColor = "red"">
</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Event/Mouse_Event&oldid=8776»