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 instanceof,typeof的区别
Mar 24 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
vue移动端屏幕适配详解
Apr 30 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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
一篇不错的PHP基础学习笔记
2007/03/18 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
JS delegate与live浅析
2013/12/21 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python中str.format()详解
2017/03/12 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Python中反射和描述器总结
2018/09/23 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
Python3+Appium安装使用教程
2019/07/05 Python
python 画条形图(柱状图)实例
2020/04/24 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
python RSA加密的示例
2020/12/09 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
中软国际Java程序员机试题
2012/08/19 面试题
工程材料采购方案
2014/05/18 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
黄石寨导游词
2015/02/05 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书