• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

事件:事件类型-滚轮事件WheelEvent

武飞扬头像
废废的肥阳
帮助2

一 定义

  • 鼠标事件还有一个名为滚轮事件的子类别
  • 滚轮事件只有一个事件 mousewheel,反映的是鼠标滚 轮或带滚轮的类似设备上滚轮的交互

二 客户端坐标

0、属性:clientX 和 clientY

1、定义:

  • 鼠标事件都是在浏览器视口中的某个位置上发生的
  • 这些信息被保存在 event 对象的clientX 和 clientY 属性中
  • 这两个属性表示事件发生时鼠标光标在视口中的坐标,所有浏览器都支持

2、图示:

学新通

3、获取方式:

  1.  
    // 可以通过下面的方式获取鼠标事件的客户端坐标:
  2.  
    let div = document.getElementById("myDiv");
  3.  
    div.addEventListener("click", (event) => {
  4.  
    console.log(`Client coordinates: ${event.clientX}, ${event.clientY}`);
  5.  
    });
  6.  
     
  7.  
    // 这个例子为<div>元素指定了一个 onclick 事件处理程序。当元素被点击时,会显示事件发生时鼠标光标在客户端视口中的坐标。注意客户端坐标不考虑页面滚动,因此这两个值并不代表鼠标在页面上的位置。

三 页面坐标 

0、属性:

  • IE8 及更早版本:scrollLeft 和 scrollTop
    (  document.body(混杂模式)或 document.documentElement(标准模式)的 )
  • 新版本:pageX 和 pageY

1、定义

  • 页面坐标是事件发生时鼠标光标在页面上的坐标,通过 event 对象的 pageX 和 pageY 可以获取
  • 这两个属性表示鼠标光标在页面上的位置, 因此反映的是光标到页面而非视口左边与上边的距离
  • 在页面没有滚动时,pageX 和 pageY 与 clientX 和 clientY 的值相同
  1.  
    // 可以像下面这样取得鼠标事件的页面坐标:
  2.  
    let div = document.getElementById("myDiv");
  3.  
    div.addEventListener("click", (event) => {
  4.  
    console.log(`Page coordinates: ${event.pageX}, ${event.pageY}`);
  5.  
    });
  1.  
    let div = document.getElementById("myDiv");
  2.  
    div.addEventListener("click", (event) => {
  3.  
    let pageX = event.pageX,
  4.  
    pageY = event.pageY;
  5.  
    if (pageX === undefined) {
  6.  
    pageX = event.clientX (document.body.scrollLeft ||
  7.  
    document.documentElement.scrollLeft);
  8.  
    }
  9.  
    if (pageY === undefined) {
  10.  
    pageY = event.clientY (document.body.scrollTop ||
  11.  
    document.documentElement.scrollTop);
  12.  
    }
  13.  
    console.log(`Page coordinates: ${pageX}, ${pageY}`);
  14.  
    });

四 屏幕坐标

0、属性:screenX 和 screenY

1、定义:鼠标事件不仅是在浏览器窗口中发生的,也是在整个屏幕上发生的

2、图示

学新通

 3、获取方式

  1.  
    let div = document.getElementById("myDiv");
  2.  
    div.addEventListener("click", (event) => {
  3.  
    console.log(`Screen coordinates: ${event.screenX}, ${event.screenY}`);
  4.  
    });
  5.  
     
  6.  
    // 与前面的例子类似,这段代码也为<div>元素指定了 onclick 事件处理程序。当元素被点击时,会通过控制台打印出事件的屏幕坐标

    

三者的比较:

类型 定义 属性
客户端坐标 鼠标事件发生时鼠标光标在客户端视口中的坐标 clientX 和 clientY
页面坐标 事件发生时鼠标光标在页面上的坐标 pageX 和 pageY /  scrollLeft 和 scrollTop
屏幕坐标 鼠标事件不仅是在浏览器窗口中发生的,也是在整个屏幕上发生的 screenX 和 screenY

五  其他元素

1、修饰键

定义:键盘上的修饰键 Shift、Ctrl、Alt 和 Meta 经常用于修改鼠标事件的行为

属性:

  • 4 个属性来表 示这几个修饰键的状态:shiftKey、ctrlKey、altKey 和 metaKey
  • 修饰键被按下时包含布尔值 true,没有被按下时包含 false
  • 在鼠标事件发生的,可以通过这几个属性来检测修饰键是否被按下
  1.  
    let div = document.getElementById("myDiv");
  2.  
    div.addEventListener("click", (event) => {
  3.  
    let keys = new Array();
  4.  
    if (event.shiftKey) {
  5.  
    keys.push("shift");
  6.  
    }
  7.  
    if (event.ctrlKey) {
  8.  
    keys.push("ctrl");
  9.  
    }
  10.  
    if (event.altKey) {
  11.  
    keys.push("alt");
  12.  
    }
  13.  
    if (event.metaKey) {
  14.  
    keys.push("meta");
  15.  
    }
  16.  
    console.log("Keys: " keys.join(","));
  17.  
    });
  18.  
    // 在这个例子中,onclick 事件处理程序检查了不同修饰键的状态。keys 数组中包含了在事件发生时被按下的修饰键的名称。每个对应属性为 true 的修饰键的名称都会添加到 keys 中。最后,事件处理程序会输出所有键的名称
学新通

2、相关元素

定义:

  • 对 mouSEO((Search Engine Optimization))ver 和 mouSEO((Search Engine Optimization))ut 事件而言,还存在与事件相关的其他元素。
  • 这两个事件都涉及从一个元素的边界之内把光标移到另一个元素的边界之内。
  • 对 mouSEO((Search Engine Optimization))ver 事件来说,事件的主要目标是获得光标的元素,相关元素是失去光标的元素
  • 对 mouSEO((Search Engine Optimization))ut 事件来说,事件的主要目标是失去光标的元素,相关元素是获得光标的元素。
  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <title>Related Elements Example</title>
  5.  
    </head>
  6.  
    <body>
  7.  
    <div id="myDiv"
  8.  
    style="background-color:red;height:100px;width:100px;"></div>
  9.  
    </body>
  10.  
    </html>
  11.  
     
  12.  
    // 这个页面中只包含一个<div>元素。如果光标开始在<div>元素上,然后从它上面移出,则<div>元素上会触发 mouSEO((Search Engine Optimization))ut 事件,相关元素为<body>元素。与此同时,<body>元素上会触发 mouSEO((Search Engine Optimization))ver事件,相关元素是<div>元素

相关元素的信息收集:

  • DOM通过 event 对象的 relatedTarget 属性提供了相关元素的信息
    • 这个属性只有在 mouSEO((Search Engine Optimization))ver 和 mouSEO((Search Engine Optimization))ut 事件发生时才包含值,其他所有事件的这个属性的值都是 null
  • IE8 及更早版本不支持 relatedTarget 属性,但提供了其他的可以访问到相关元素的属性
    • 在 mouSEO((Search Engine Optimization))ver 事件触发时,IE 会提供 fromElement 属性,其中包含相关元素
    • 在 mouSEO((Search Engine Optimization))ut 事件触发时,IE 会提供 toElement 属性,其中包含相关元素。(IE9 支持所有这些属性。)
  1.  
    // 可以在 EventUtil 中增加一个通用的获取相关属性的方法:
  2.  
    var EventUtil = {
  3.  
    // 其他代码
  4.  
    getRelatedTarget: function(event) {
  5.  
    if (event.relatedTarget) {
  6.  
    return event.relatedTarget;
  7.  
    } else if (event.toElement) {
  8.  
    return event.toElement;
  9.  
    } else if (event.fromElement) {
  10.  
    return event.fromElement;
  11.  
    } else {
  12.  
    return null;
  13.  
    }
  14.  
    },
  15.  
    // 其他代码
  16.  
    };
  17.  
     
  18.  
     
  19.  
    // 与前面介绍的其他跨浏览器方法一样,这个方法同样使用特性检测来确定要返回哪个值。可以像下面这样使用 EventUtil.getRelatedTarget()方法:
  20.  
    let div = document.getElementById("myDiv");
  21.  
    div.addEventListener("mouSEO((Search Engine Optimization))ut", (event) => {
  22.  
    let target = event.target;
  23.  
    let relatedTarget = EventUtil.getRelatedTarget(event);
  24.  
    console.log(
  25.  
    `Moused out of ${target.tagName} to ${relatedTarget.tagName}`);
  26.  
    });
  27.  
     
  28.  
    //这个例子在<div>元素上注册了 mouSEO((Search Engine Optimization))ut 事件处理程序。当事件触发时,就会打印出一条消息说明鼠标从哪个元素移出,移到了哪个元素上
学新通

3、鼠标按键

定义:

  • 只有在元素上单击鼠标主键(或按下键盘上的回车键)时 click 事件才会触发,因此按键信息并不是必需的。
  • 对 mousedown 和 mouseup 事件来说,event 对象上会有一个 button 属性,表示按下或 释放的是哪个按键。
  • DOM 为这个 button 属性定义了 3 个值:0 表示鼠标主键、1 表示鼠标中键(通常 也是滚轮键)、2 表示鼠标副键。按照惯例,鼠标主键通常是左边的按键,副键通常是右边的按键

4、额外事件信息

定义:

  • DOM2 Events 规范在 event 对象上提供了 detail 属性,以给出关于事件的更多信息。
  • 对鼠标事 件来说,detail 包含一个数值,表示在给定位置上发生了多少次单击。
  • 单击相当于在同一个像素上发 生一次 mousedown 紧跟一次 mouseup。
    • detail 的值从 1 开始,每次单击会加 1。
    • 如果鼠标在 mousedown 和 mouseup 之间移动了,则 detail 会重置为 0

5、mousewheel 事件

定义:

  • mousewheel 事件会在用户使用鼠标滚轮时触发,包括在垂直方向上任意滚动。
  • 这个事件会在任何元素上触发,并(在 IE8 中)冒泡到 document 和(在所有现代浏览器中)window
  • mousewheel 事件的 event 对象包含鼠标事件的所有标准信息

属性/方法:

  • wheelDelta:
    • 当鼠标滚轮向前滚动时, wheelDelta 每次都是 120
    • 当鼠标滚轮向后滚动时,wheelDelta 每次都是–120
  • onmousewheel

图示:

学新通

代码实现:

  1.  
    // 可以为页面上的任何元素或文档添加 onmousewheel 事件处理程序,以处理所有鼠标滚轮交互,
  2.  
     
  3.  
    document.addEventListener("mousewheel", (event) => {
  4.  
    console.log(event.wheelDelta);
  5.  
    });
  6.  
     
  7.  
    //这个例子简单地显示了鼠标滚轮事件触发时 wheelDelta 的值。多数情况下只需知道滚轮滚动的方向,而这通过 wheelDelta 值的符号就可以知道

6、触摸屏设备

注意事项:

  • 不支持 dblclick 事件。双击浏览器窗口可以放大,但没有办法覆盖这个行为
  • 单指点触屏幕上的可点击元素会触发 mousemove 事件。
    • 如果操作会导致内容变化,则不会再触 发其他事件。如果屏幕上没有变化,则会相继触发 mousedown、mouseup 和 click 事件。
    • 点触不可点击的元素不会触发事件。可点击元素是指点击时有默认动作的元素(如链接)或指定 了 onclick 事件处理程序的元素
  • mousemove 事件也会触发 mouSEO((Search Engine Optimization))ver 和 mouSEO((Search Engine Optimization))ut 事件
  • 双指点触屏幕并滑动导致页面滚动时会触发 mousewheel 和 scroll 事件

7、无障碍问题: 可以参考 WebAIM 网站

本篇文章来至:学新通

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通
  • 本文地址: https://www.swvq.com/boutique/detail/tanhcjabjj
  • 联系方式: luke.wu#vfv.cc
系列文章
更多 icon
同类精品
更多 icon
我要评论
我的头像
精彩评论
继续加载