您当前的位置:首页 > 网站建设笔记 >

鼠标与滚轮事件

0

鼠标事件是Web开发中最常用的一类事件,毕竟鼠标还是最主要的定位设备。DOM3级事件中定义了9个鼠标事件,简介如下。

  • click:在用户单击主鼠标按钮(一般是左边的按钮)或者按下回车键时触发。这一点对确保易访问性很重要,意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
  • dblclick:在用户双击主鼠标按钮(一般是左边的按钮)时触发。从技术上说,这个事件并不是DOM2级事件规范中规定的,但鉴于它得到了广泛支持,所以DOM3级事件将其纳入了标准。
  • mousedown:在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
  • mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件,但DOM3级事件将它纳入了规范。IE、Firefox 9+和Opera支持这个事件。
  • mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件,但DOM3级事件将它纳入了规范。IE、Firefox 9+和Opera支持这个事件。
  • mousemove:当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。
  • mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素。不能通过键盘触发这个事件。
  • mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
  • mouseup:在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

页面上的所有元素都支持鼠标事件。除了mouseenter和mouseleave,所有鼠标事件都会冒泡,也可以被取消,而取消鼠标事件将会影响浏览器的默认行为。取消鼠标事件的默认行为还会影响其他事件,因为鼠标事件与其他事件是密不可分的关系。

只有在同一个元素上相继触发mousedown和mouseup事件,才会触发click事件,如果mousedown或mouseup中的一个被取消,就不会触发click事件。类似地,只有触发两次click事件,才会触发一次dblclick事件。如果有代码阻止了连续两次触发click事件(可能是直接取消click事件,也可能通过取消mousedown或mouseup间接实现),那么就不会触发dblclick事件了。这4个事件触发的顺序始终如下:

(1) mousedown
(2) mouseup
(3) click
(4) mousedown
(5) mouseup
(6) click
(7) dblclick

显然,click和dblclick事件都会依赖于其他先行事件的触发,而mousedown和mouseup则不受其他事件的影响。IE8及之前版本中的实现有一个小bug,因此在双击事件中,会跳过第二个mousedown和click事件,其顺序如下:

(1) mousedown
(2) mouseup
(3) click
(4) mouseup
(5) dblclick

IE9修复了这个bug,之后顺序就正确了。使用以下代码可以检测浏览器是否支持以上DOM2级事件(除dblclick、mouseenter和mouseleave之外):

var isSupported = document.implementation.hasFeature("MouseEvents","2.0");
要检测浏览器是否支持上面的所有事件,可以使用以下代码:
var isSupported = document.implementation.hasFeature("MouseEvent","3.0");

<script type="text/javascript">
var tips=null;
function createTips(event){
  if(tips===null){
    tips=document.createElement("div");
    tips.style.cssText="position:absolute;z-index:99999;padding:3px 6px;background-color:#333;color:#fff;border-radius:3px;box-shadow:0 0 5px #333;font-family:Arial;font-size:12px;";
    document.body.appendChild(tips);
  }
  event=event||window.event;
  var target=event.target||event.srcElement;
  tips.innerHTML+=event.type+"<br>";
  if(event.type=="dblclick"){
    var pageX=event.pageX,pageY=event.pageY;
    if(pageX===undefined){pageX=event.clientX+(document.body.scrollLeft || document.documentElement.scrollLeft);}
    if(pageY===undefined){pageY=event.clientY+(document.body.scrollTop || document.documentElement.scrollTop);}
    tips.style.left=(tips.offsetWidth>pageX?pageX:pageX-tips.offsetWidth)+"px";
    tips.style.top=(tips.offsetHeight>pageY?pageY:pageY-tips.offsetHeight)+"px";
  }
}
if(document.addEventListener){
  document.addEventListener("mousedown",function(event){createTips(event);},false);
  document.addEventListener("mouseup",function(event){createTips(event);},false);
  document.addEventListener("click",function(event){createTips(event);},false);
  document.addEventListener("dblclick",function(event){createTips(event);},false);
}else{
  document.attachEvent("onmousedown",function(event){createTips(event);});
  document.attachEvent("onmouseup",function(event){createTips(event);});
  document.attachEvent("onclick",function(event){createTips(event);});
  document.attachEvent("ondblclick",function(event){createTips(event);});
}
</script>
顶部中部底部