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 相关文章推荐
JavaScript 替换Html标签实现代码
Oct 14 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
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注释实例技巧
2008/10/03 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
简单介绍python封装的基本知识
2019/08/10 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
Python中私有属性的定义方式
2020/03/05 Python
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
Servlet的生命周期
2013/08/25 面试题
庆祝教师节活动方案
2014/01/31 职场文书
调解员先进事迹材料
2014/02/07 职场文书
机关办公室岗位职责
2014/04/16 职场文书
党建工作先进材料
2014/05/02 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
解析Redis Cluster原理
2021/06/21 Redis
总结python多进程multiprocessing的相关知识
2021/06/29 Python