【JS】鼠标事件

定位鼠标位置

1、在浏览器可视窗口的位置

 EventUtil.addHandler(div, "click", function(event){
       event = EventUtil.getEvent(event);
       alert("Client coordinates: " + event.clientX + "," + event.clientY);        
 });

2、在整个页面的窗口的位置(当页面没有滚动条时跟1的值一致)

注意：在IE8及更早版本不支持pageX和pageY，可以通过document.body(混杂模式)或者document.documentElement(标准模式)的scrollLeft 和scrollTop来获取。

EventUtil.addHandler(div, "click", function(event){
            event = EventUtil.getEvent(event);
            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);
            }
        
            alert("Page coordinates: " + event.pageX + "|" + pageX + "," + event.pageY + "|"+pageY);        
        });

3、在整个电脑屏幕的位置

EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    alert("Screen coordinates: " + event.screenX + "," + event.screenY);        
});

 

当用户按下shift键进行选择的时候可能需要进行特别的处理，或者用户是否按下了键盘上的一些特殊的键，例如：Shift/Ctrl/Alt/Meta(window是windows键，mac是Cmd键)。

IE8及之前的版本不支持metaKey属性

EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    var keys = new Array();

    if (event.shiftKey){
        keys.push("shift");
    }

    if (event.ctrlKey){
        keys.push("ctrl");
    }

    if (event.altKey){
        keys.push("alt");
    }

    if (event.metaKey){
        keys.push("meta");
    }

    alert("Keys: " + keys.join(","));

}); 

 

鼠标滚轮事件

EventUtil.addHandler(document, "mousewheel", doMouseWheel);
//火狐的处理事件
EventUtil.addHandler(document, "DOMMouseScroll", doMouseWheel);
function doMouseWheel(event){
　　event = EventUtil.getEvent(event);
　　var delta = EventUtil.getWheelDelta(event);
　　if(delta==120){
   　　 alert("向上滚动了一下");
　　}
　　if(delta==-120){
   　　 alert("向下滚动了一下");
　　}
}