JavaScript事件对象详解：Button与clientX/clientY属性解析
本文深入解析JavaScript事件对象中的关键属性。重点介绍Button属性在不同鼠标按键组合下的整数值定义，以及IE与DOM模型在数值判定上的差异。同时详细阐述clientX和clientY属性如何获取鼠标在客户端区域的精确坐标，并提供兼容现代浏览器的实时坐标追踪示例代码，帮助开发者掌握拖拽开发中的事件处理基础。
在阅读本文前，建议先阅读《Javascript拖拽&拖放系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性》，以便更好地理解上下文逻辑。
接下来，我们将正式进入事件对象的核心内容讲解。
事件对象属性详解
首先介绍模型中相同或相似的事件属性与方法。
1. Button属性
该属性为Integer类型，具备可读和可写特性。在特定的鼠标事件中，它用于标识当前按下的鼠标按钮状态，这在判断是否由鼠标左键触发mousedown事件时尤为重要。其所有取值及对应含义如下（参考自《Javascript高级程序设计》）：
3.1 e/window.Event对象的属性/方法
3.1.1 IE事件模型与DOM事件模型的对比如下：
0 - 未按下任何按钮
1 - 按下鼠标左键
2 - 按下鼠标右键
3 - 同时按下左键和右键
4 - 按下鼠标中键
5 - 同时按下左键和中键
6 - 同时按下右键和中键
7 - 同时按下左键、中键和右键
需要注意的是，mouseup事件中的button属性返回值与mousedown事件完全一致。
注：在兼容DOM事件模型的浏览器中，0代表按下左键，数值1不存在，2代表右键；对于非鼠标事件，该属性返回“undefined”。
clientX与clientY坐标属性
2. clientX、clientY属性
这两个属性的类型均为Integer，单位为像素，且可读可写。它们分别表示事件发生时，鼠标指针在浏览器客户端区域（不包含工具栏、滚动条等）的x轴和y轴坐标。为了更直观地理解，请参考下图说明：
图3.1：clientX和clientY属性示意图
以下代码提供了一个简单的示例，用于实时定位鼠标坐标并将结果显示在两个文本框中。该示例兼容目前所有现代浏览器，您可以尝试运行查看效果。
示例代码1：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
border:1px solid black;
margin:0px;
}
</style>
<script type="text/javascript" language="JavaScript">
document.onmousemove=move;
function move(e){
if(!e)
{
e=window.event;
}
var xElement=document.getElementById("x");
var yElement=document.getElementById("y");
xElement.value=e.clientX;
yElement.value=e.clientY;
}
</script>
</head>
<body>
<input type="text" id="x" value="" />
<input type="text" id="y" value="" />
</body>
</html>
3 type属性
1234下一页阅读全文
JavaScript将图片转换为Base64编码的两种途径
2026-11-05 16:43:05
怎么在 Vue 或 React 项目中正确集成 animate.js
2026-11-05 10:23:38
JS注册事件：addEventListener基础语法与参数详解
2026-11-05 08:44:56
JSP和JS的区别：运行环境与服务端/客户端职责解析
2026-11-04 23:34:36
pdf.js 官方下载地址：GitHub Release 获取预编译包
2026-11-04 23:07:27