• 【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("向下滚动了一下");
      }
    }
  • 相关阅读:
    用css画三角形(提示框三角形)
    SpringMVC(2)之表单(非表单)参数绑定
    mvn jetty:run--编码GBK的不可映射字符
    Git命令及常见问题
    eclipse整合ssh框架基础
    css基础一(权重与position)
    sublime Text3下sass环境配置(windows)
    sublime Text3 设置多个浏览器预览
    初识iOS NSTimer 循环引用不释放问题
    ARC MARC 文件支持
  • 原文地址:https://www.cnblogs.com/yangzhilong/p/3083734.html
Copyright © 2020-2023  润新知