【js学习笔记-094】---------鼠标事件

除”mouseenter” 和”mouseleave”外的所有鼠标事件都能冒泡。链接和提交按钮的”click”事件都有默认操作且能够阻止。可以取消上下文菜单事件来阻止显示上下文菜单，但一些浏览器有配置选项导致不能取消上下文菜单。

类型	说明
click	高级事件，当用户按下并释放鼠标或其他方式“激活”元素时触发
contextmenu	可以取消的事件，当上下文菜单即将出现时触发，当前浏览器在鼠标右击时显示上下文菜单，所以这个事件也能像click事件那样使用
dbclick	双击触发
mousedown	用户按下鼠标按键时触发
mouseup	用户释放鼠标按键时触发
mousemove	用户移动鼠标时触发
mouseover	当鼠标进入元素时触发，relatedTarget(ie:fromeElement)指的是事件来源的元素
mouseout	当鼠标离开元素时触发。relatedTarget(ie:fromeElement)指的是事件来源的元素
mouseenter	类似mouseover 不冒泡，IE引入 Html5将其标准化，但尚未广泛实现
mouseleave	类似mouseout 不冒泡，IE引入 Html5将其标准化，但尚未广泛实现

 

传递给鼠标事件的处理程序的事件对象有clientX和clientY属性。它们指定了鼠标指针相对于包含窗口的坐标。加入窗口的滚动偏移量就可以把鼠标位置转换成文档坐标。

altKey/ctrlKey/metaKey/shiftKey属性指定了当事件发生时是否有各种键盘辅助键按下。

button属性指定当事件发生旱哪个鼠标按键按下，但是，不同浏览器这个属性赋不同的值，所以它很难用。通常contextmenu事件发生的标志是右击。但如上所述，当事件发生时可能无法阻止上下文菜单的显示。

 

例：拖动文档元素

//drag.js 拖动绝对定位的html元素，它用于mousedown事件处理程序调用随后的mousemove事件将移动元素，mouseup事件终止拖动这些实现能同标准和ie两种事件模型一起工作，它需要用到前几节中介绍的getScrollOffsets()方法

 

function drag(elementToDrag,event){

      //初始鼠标位置，转换为文档坐标

      var scroll = getScrollOffsets();

      var startX = event.clientX+scroll.x;

      var startY = event.clientY+scroll.y;

      

       //文档坐标下，待拖动元素的初始位置

       //因为elementToDrag是绝对定位

      //所以我们可以假设它的offsetParent就是文档的body元素

      var  origX =elementToDrag.offsetLeft;

      var  origY =elementToDarag.offsetTop;

 

      //计算mousedown事件和元素左上角之间的距离

     //鼠标移动的距离

     var deltaX = startX – origX;

      var deltaY  =startY – origY;

     //注册用于响应接着mousedown事件发生的mousemove和mouseup事件处理程序

     if(document.addEventListener){

        document.addEventListerner(“mousermove”,moveHandler,true);

document.addEventListerner(“mouseup”,upHandler,true);

 

}else if(){

 //IE事件模型中

//捕获事件是通过调用元素上的setCapture()捕获它们

elementToDrag.setCapture();

elementToDrag.attachEvent(“onmousemove”, moveHandler);

elementToDrag.attachEvent(“onmouseup”, upHandler);

//作为mouseup事件看待鼠标捕获的丢失

elementToDrag.attachEvent(“onlosecapture”, upHandler);

 

 

}

//这个事件，不让任何其他元素看到它

if(event.stopPropagation)event.stopPropagation();

else event.cancelBubble = true;

if(event.preventDefault) event.preventDefault();

else event.returnValue = false;

/**

当元素正在被拖动时，这就是捕获mousemove事件的处理程序

它用于移动这个元素

*/

function moveHandler(e){

     if(!e) = window.event;//IE事件模型

     //移动这个元素到当前鼠标位置

     //通过滚动条的位置和初始单击的偏移量来调整

    var scroll =getScrollOffsets();

    elementTopDrag.style.left= (e.clientX + scroll.x – deltaX)+”px”;

elementTopDrag.style.top = (e.clientY + scroll.y – deltaY)+”px”;

if(e.stopPropagation)e.stopPropagation();

else e.cancelBubble = true;

}

//这是捕获在拖动结束时发生的最终mouseup事件的处理程序

function upHandler(e){

  if(!e) e = window.event;

  if(document.removeEventListener){

document.removeEventListener(“mousermove”,moveHandler,true);

document. removeEventListener (“mouseup”,upHandler,true);

}else if (document.detachEvent){

elementToDrag.detachEvent(“onlosecapture”, upHandler);

elementToDrag. detachEvent (“onmouseup”, upHandler);

elementToDrag. detachEvent (“onmousemove”, moveHandler);

elementToDrag.releaseCapture();

 

}

if(e.stopPropagation)e. stopPropagation();

else e.cancelBubble=true;

}

}

 

Html:

<div style=”position:absolute;left:100px;width:250px;background-color:white;border:solidblack;”>

     <div style=”background-color:gray;border-bottom:dottedblack;padding:3px;font-family:sans-serif;font-weight:bold;”οnmοusedοwn=”drag(this.parentNode,event);”>标题栏</div>

   

<div>