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


Posted in Javascript onJanuary 15, 2016

焦点事件

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

相关元素

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 相关文章推荐
jQuery实现的Div窗口震动特效
Jun 09 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
7个jQuery最佳实践
Jan 12 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
JavaScript提高性能知识点汇总
Jan 15 #Javascript
学习JavaScript设计模式之中介者模式
Jan 14 #Javascript
轻松实现jquery手风琴效果
Jan 14 #Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 #Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 #Javascript
分享网页检测摇一摇实例代码
Jan 14 #Javascript
jquery淡入淡出效果简单实例
Jan 14 #Javascript
You might like
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
php面向对象重点知识分享
2019/09/27 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
python socket 超时设置 errno 10054
2014/07/01 Python
跟老齐学Python之网站的结构
2014/10/24 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
python实现简单颜色识别程序
2020/02/19 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
装潢设计专业推荐信模板
2013/11/26 职场文书
社区反邪教工作方案
2014/06/16 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
军训个人总结
2015/03/03 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书