zoukankan      html  css  js  c++  java
  • Javascript和jquery事件--鼠标移动事件mousemove

    mousemove,一个监听元素上鼠标移动的事件,如果鼠标在元素上移动,大概每16毫秒触发一次。我觉得挺有趣的一个元素,不过有替代还是不太推荐,从这个事件的触发频率就可以看出它会拖慢响应速度,消耗资源。

    在js中可以使用onmousemove和addEventListener(‘mousemove’,fn)来设置

    在jq中可以直接绑定mousemove的监听器,也可以使用封装好的函数mousemove()

               //********显示元素的id和type
                var t = null;
                function showit(e){
                    var e = e||window.event||event;
                    //console.log(e.movementY);
                    
                    console.log(e.target.getAttribute('id'));
                    console.log(e.type);
                    var temp = e.timeStamp;
                    if(t!=null){
                        console.log(temp-t);
                    }
                    t = temp;
                    
                }
                
                //********js的mousemove
                document.getElementById('c1').onmousemove=showit;
                
                
                
                //*********jquery也可以使用mousemove
                //$('#c2').on('mousemove',showit);
                //$('#c2').onmousemove=showit;//无效
                $('#c2').mousemove(showit);

    在mousemove中我们关注的应该是鼠标的位置和移动方向,关于鼠标的位置,之前就有提过,在事件对象event中可以看到:

      PageX,PageY获得鼠标相对页面的位置。

      clientX,clientY获得的是鼠标相对浏览器的位置。

      screenX,screenY获得的是鼠标相对当前页面屏幕的位置

      offsetX,offsetY是鼠标在触发事件的元素中的位置。

    通过位置的变化也可以获得鼠标方向,不过事件对象也有提供与mousemove事件相关的两个参数:

      movementX: 向左移动为负数,向右移动为正数

      movementY: 向上移动为正数,向下移动为负数

    当你深入了解,你就会发现世界如此广袤,而你对世界的了解则是如此浅薄,请永远保持谦卑的态度。
  • 相关阅读:
    js禁止页面回退,刷新,右键代码
    asp.net网站中的Gridview循环判断数据是否被选中
    Gridview中同时选中并删除多个数据
    asp.net中在后台更换控件图片的代码
    关于gcd的8题
    flash AIR 通过BitmapData生成图片到android Camera相册
    flash AIR 通过BitmapData生成图片到本地
    C的随机数
    xcode svn设置事项
    拒绝session丢失 利用DIV层实现对模态窗口的模拟
  • 原文地址:https://www.cnblogs.com/liwxmyself/p/10254958.html
Copyright © 2011-2022 走看看