JavaScript 焦点、鼠标与滚轮事件详解及兼容性处理

作者：白露时间：2026-10-29 20:54:58浏览：562

本文整理 JavaScript 中焦点、鼠标及滚轮事件的核心要点，涵盖 blur、focus、click 等常见事件特性，对比 mouseover/mouseenter 等差异，并详细说明 clientX/pageX/screenX 坐标、修改键状态、相关元素及按钮属性的获取方法。同时提供 IE8 及 Opera、Firefox 等浏览器的兼容方案与触摸设备行为说明。

JavaScript 焦点、鼠标与滚轮事件详解及兼容性处理

本文针对 JavaScript 事件中“事件类型”下“焦点、鼠标和滚轮事件”的注意要点进行整理，分享给大家供大家参考，具体内容如下

焦点事件

一、焦点事件

一般利用这些事件与 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 事件

滚轮事件与坐标属性

三、滚轮事件

1、客户区坐标位置 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);
};

2、页面坐标位置 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);
};

3、屏幕坐标位置 screenX 和 screenY；

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

4、修改键

修改键有 Shift、Ctrl、Alt、Meta（window 上的 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);
}

5、相关元素

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

鼠标按钮与事件详细信息

四、鼠标按钮

1、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 定义的，以后再讨论

2、更多的事件信息

detail 属性

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

3、鼠标滚轮事件

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

触摸设备与无障碍性

4、触摸设备

iOS 和 Android 设备中：

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

5、无障碍性问题

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

以上就是本文的全部内容，希望对大家的学习有所帮助。

作者最新文章

AOS.js 动画不触发怎么办？排查 DOM 加载与移动端兼容问题

2026-11-05 17:02:26

sigma.js 怎么实现节点点击、拖拽与悬停提示交互

2026-11-05 15:03:27

Matter.js 与 PixiJS/Three.js 集成：分离物理计算与渲染

2026-11-05 13:43:48

主流JS弹幕库选型指南：Danmaku.js等库的功能与体积对比

2026-11-05 09:28:19

JavaScript点击事件监听与交互效果实例

2026-11-05 09:10:19