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 相关文章推荐
js setattribute批量设置css样式
Nov 26 Javascript
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
vue实现弹幕功能
Oct 25 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执行普通shell命令流程解析
2020/08/24 PHP
jquery插件之easing使用
2010/08/19 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python中特殊函数集锦
2015/07/27 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
git进行版本控制心得详谈
2017/12/10 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
给儿子的表扬信
2014/01/15 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
给客户的感谢信
2015/01/21 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
vue特效之翻牌动画
2022/04/20 Vue.js