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


Posted in Javascript onJanuary 25, 2016

本文针对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.relatedTargetevent.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执行重要的操作;

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

Javascript 相关文章推荐
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
JavaScript实现给定时间相加天数的方法
Jan 25 #Javascript
jQuery中inArray方法注意事项分析
Jan 25 #Javascript
jquery ui dialog替代confirm实例分析
Jan 25 #Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 #Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 #Javascript
详解jquery事件delegate()的使用方法
Jan 25 #Javascript
AngularJS中的Directive实现延迟加载
Jan 25 #Javascript
You might like
缓存技术详谈―php
2006/12/14 PHP
在PHP中使用模板的方法
2008/05/24 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
Python简单日志处理类分享
2015/02/14 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
python 换位密码算法的实例详解
2017/07/19 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python高级特性简介
2020/08/13 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
python 基于opencv操作摄像头
2020/12/24 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
业务员岗位职责
2013/11/16 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
单位单身证明样本
2014/10/11 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
员工自我工作评价
2015/03/06 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
电工实训心得体会
2016/01/14 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
Django与数据库交互的实现
2021/06/03 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
青岛市的收音机研制与生产
2022/04/07 无线电