关于我们当前位置:星鸿娱乐 > 关于我们 > >

星鸿娱乐:JavaScript事件类型中焦点、鼠标和滚轮

  

[JavaScript,焦点,鼠标,滚轮事件]JavaScript事件类型中焦点、鼠标和滚轮事件详解

  

本文针对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执行重要的操作;
  •   
  

以上就是本文的全部内容,希望对大家的学习有所帮助。

  

(责任编辑:admin)

上一篇:jquery精度计算代码 jquery指定精确小数位

下一篇:JavaScript入门教程(12) js对象化编程

推荐内容

客户服务热线

400 888 8932

在线客服