JavaScript焦点事件、鼠标事件和滚轮事件详解

作者：微光时间：2026-10-29 20:31:07浏览：616

本文详细解析JavaScript中的焦点事件、鼠标事件及滚轮事件机制。涵盖focus、blur等焦点触发顺序，mousedown至dblclick的点击序列，以及IE与DOM在鼠标按钮、坐标获取和滚轮事件上的兼容差异，提供实用的跨浏览器处理方案。

焦点事件机制

焦点事件

通常结合document.hasFocus()方法与document.activeElement属性来使用这些事件。主要包含以下几种：

blur：元素失去焦点，该事件不会冒泡； DOMFocusIn：等同于HTML中的focus事件，在DOM3标准中已被废弃，建议使用focusin； DOMFocusOut：等同于HTML中的blur事件，在DOM3标准中已被废弃，建议使用focusout； focus：元素获得焦点，该事件不会冒泡； focusin：元素获得焦点，与HTML中的focus事件效果相同，但支持冒泡； focusout：元素失去焦点，与HTML中的blur事件效果相同；例如：


window.onfocus = function () {
  console.log('focus'); //focus
  console.log(document.hasFocus()); //True
}
window.onblur = function () {
  console.log('blur'); //blur
  console.log(document.hasFocus()); //False
}

当焦点从页面中的一个元素转移到另一个元素时，会按以下顺序触发事件：

focusout --> focusin --> blur --> DOMFocusOut --> focus --> DOMFocusIn

鼠标事件详解

鼠标事件

DOM3级事件规范中定义了9种鼠标事件：


click
dblclick
mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发这个事件；
mouseup：用户释放鼠标按钮时触发，不能通过键盘触发这个事件；
mousemove：不能通过键盘触发这个事件；
mouseenter：不冒泡，且光标移动到后代元素上不会触发；
mouseleave：不冒泡，且光标移动到后代元素上不会触发；
mouseover：光标移动到后代元素上会触发；
mouseout：光标移动到后代元素上会触发；

具体示例如下：


div.onmouseover = function() {
  console.log('mouseover'); //在子元素上会触发
}
div.onmouseout = function() {
  console.log('mouseout'); //在子元素上会触发
}
div.onmouseenter = function() {
  console.log('mouseenter'); //在子元素上不会触发
}
div.onmouseleave = function() {
  console.log('mouseleave'); //在子元素上不会触发
}

只有当在同一个元素上依次触发mousedown和mouseup事件时，才会触发click事件；只有当click事件被触发两次后，才会依次触发dblclick事件。

其触发顺序如下：

mousedown --> mouseup --> click --> mousedown --> mouseup --> click --> dblclick

在IE8之前的版本中存在一个bug，即在双击事件中，会跳过第二个mousedown和click事件。

滚轮事件与坐标

滚轮事件

客户区坐标位置clientX和clientY属性

例如：


window.onmousemove = function() {
    clickX = event.clientX;
    clickY = event.clientY;
    var div = document.createElement("img");
    div.src = "hhh.gif"
    div.style.position = "absolute";
    div.style.width = '100px';
    div.style.left = clickX + "px";
    div.style.top = clickY + "px";
    document.body.appendChild(div);
};

页面坐标位置pageX与pageY；


window.onclick = function() {
    clickX = event.pageX;
    clickY = event.pageY;
    var div = document.createElement("img");
    div.src = "ppp.png"
    div.style.position = "absolute";
    div.style.width = '100px';
    div.style.left = clickX + "px";
    div.style.top = clickY + "px";
    document.body.appendChild(div);
};

在IE8及更早版本中不支持这个页面坐标位置，可以通过计算得出，需要用到混合模式下的document.body和标准模式下的document.documentElement中的scrollLeft和scrollTop属性：


if (clickX === undefined) {
  clickX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
};
if (clickY === undefined) {
  clickY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
};

屏幕坐标位置screenX和screenY；

通过该属性可以获得相对于屏幕的坐标。

修改键

修改键包括Shift、Ctrl、Alt、Meta（Windows系统上的Windows键，苹果机上的Cmd键）；对应的修改键状态属性为shiftKey、ctrlKey、altKey、metaKey，这些属性包含的都是布尔值，如果相应的键被按下了，则为true，否则为false。例如：


var array = [];
var timing = setTimeout(showArray, 100);

window.onclick = function() {
  if (event.shiftKey) {
    array.push("shift");
  };
  if (event.ctrlKey) {
    array.push("ctrl");
  };
  if (event.altKey) {
    array.push("alt");
  };
  if (event.metaKey) {
    array.push("meta");
  };
};

function showArray() {
  var str = array.toString();
  var newP = document.createElement("p");
  newP.appendChild(document.createTextNode(str));
  document.body.appendChild(newP);
  timing = setTimeout(showArray, 1000);
}

相关元素

event.relatedTarget与event.target；

relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值；对于其他事件的值则是null；IE8之前的版本不支持relatedTarget属性，在mouseover事件触发时，IE的fromElement属性中保存了相关元素；在mouseout事件触发时，IE的toElement属性中保存着相关元素。

例如：


var dot = document.getElementById("dot");
dot.onmouseout = function (){
  console.log("mouse out from" + event.target.tagName + "to" + event.relatedTarget.tagName);
};

例如：


function getRelatedTarget() {
  if (event.ralatedTarget) {
    return event.relatedTarget;
  } else if (event.toElement) {
    return event.toElement;
  } else if (event.fromElement) {
    return event.fromElement;
  } else {
    return null;
  }
}

鼠标按钮

button属性

DOM的event.button属性有三个值：0为主鼠标按钮、1为中间鼠标按钮、2为次鼠标按钮。在常规设置中，主鼠标按钮就是鼠标左键；次鼠标按钮就是鼠标右键。

IE8及之前的版本也提供了button属性，但这个属性的值与DOM的button属性有很大差异：

0：没有按下鼠标按钮； 1：主鼠标按钮； 2：次鼠标按钮； 3：同时按下主鼠标按钮和次鼠标按钮； 4：中间鼠标按钮； 5：同时按下主鼠标按钮和中间鼠标按钮； 6：同时按下次鼠标按钮和中间鼠标按钮； 7：同时按下三个鼠标按钮

兼容版：


function getButton() {
  if (document.implementation.hasFeature("MouseEvents", "2.0")) {
    return event.button;
  } else {
    switch (event.button) {
      case 0:
      case 1:
      case 3:
      case 5:
      case 7:
        return 0;
      case 2:
      case 6:
        return 2;
      case 4:
        return 1;
    }
  }
}

另外，如果要屏蔽鼠标右键，应该使用：


document.oncontextmenu = function(event) {
  // if (window.event) {
  //   event = window.event;
  // }
  // try {
  //   var the = event.srcElement;
  //   if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
  //     return false;
  //   }
  //   return true;
  // } catch (e) {
  //   return false;
  // }
  return false;
}

这个事件是HTML5定义的，以后再讨论

更多的事件信息

detail属性

对于鼠标事件来说，detail包含了一个数值，表示在给定位置上发生了多少次单击（一次mousedown和一次mouseup），次数从1开始计数，如果mousedown和mouseup之间移动了位置，detail会被重置0，如果单击间隔太长也会被重置为0.

鼠标滚轮事件

mousewheel事件和wheelDelta属性

在垂直方向上滚动页面时，就会触发mousewheel，event对象里面的wheelDelta属性则表示当用户向前滚动滚轮时，wheelDelta是120的倍数；当向后滚动滚轮时，wheelDelta是-120的倍数。例如：


var clientHeight = document.documentElement.clientHeight;
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
  divs[i].style.height = clientHeight + "px";
};

window.onmousewheel = function () {
  if (event.wheelDelta <= -120) {
    window.scrollBy(0,clientHeight);
  }else if(event.wheelDelta >= 120){
    window.scrollBy(0,-clientHeight);
  };
}

另外，在Opera 9.5之前的版本中，wheelDelta值的正负号是颠倒的。

此外，Firefox支持一个名为DOMMouseScroll的类似事件，也是在鼠标滚动滚轮时触发。有关鼠标滚轮的信息保存在detail属性中。向前滚动这个属性的值为-3的倍数，向后滚动，这个属性的值是3的倍数。

通用版：


function getWheelDelta() {
  if (event.wheelDelta) {
    return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
  } else {
    return -event.detail * 40;
  };
}

触摸设备与无障碍性

触摸设备

iOS和Android设备中：

不支持dblclick；轻击可单击元素会触发mousemove；如果此操作会导致内容变化，将不再有其他事件发生；如果屏幕没有发生变化，那么依次发生mousedown、mouseup和click事件； mousemove事件也会触发mouseover和mouseout事件；两个手指操作会触发mousewheel和scroll；

无障碍性问题

使用click事件执行代码；

不要使用onmouseover向用户显示新的信息；不要使用dblclick执行重要的操作；

作者最新文章

JavaScript零基础入门：从环境搭建到运行第一段代码

2026-11-05 15:29:58

HTML链接中javascript：void(0)的作用及现代替代方案

2026-11-05 10:07:47

在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库

2026-11-05 08:53:56

原生JavaScript实现简易颜色选择器原理与代码

2026-11-03 23:22:19

JS原生表单序列化：FormData与URLSearchParams用法详解

2026-11-03 23:13:21