<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"
οnmοuseοver="handleEvent(event)"
οnmοuseοut="handleEvent(event)"
οnmοusedοwn="handleEvent(event)"
οnmοuseup="handleEvent(event)"
οnclick="handleEvent(event)"
οndblclick="handleEvent(event)" id="div1"></div>
<p><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>
鼠标事件(同前一篇键盘事件)
最新推荐文章于 2024-07-19 15:32:49 发布