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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
javascript字母大小写转换的4个函数详解
May 09 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
jQuery动画与特效详解
Feb 01 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 Javascript
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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
python实现海螺图片的方法示例
2019/05/12 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
公司承诺书范文
2014/05/19 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers