zoukankan      html  css  js  c++  java
  • js中Event各个属性的学习


    上面是页面中的html标签。

     
       $(function () {
                $("#divMove").mousemove(function (event) {
                    var ev = event || window.event;
                    //z-index属性目前只有在position:relative、position:absolute和position:fixed才有用
                     //子类相对于父类的X,Y坐标
                    var mxLeft1 = ev.offsetX || ev.layerX; //当父类添加有 position: relative那就是相对父类的x坐标 ,ev.layerX支持ff下的。
                    var mxTop1 = ev.offsetY || ev.layerY; //当前对象的X,Y坐标,就是这里面的父容器
                    var minLeft = ev.currentTarget.offsetLeft;  //对象到body的Y坐标距离
                    var minTop = ev.currentTarget.offsetTop; ///对象到body的X坐标距离
                     //父容器右边框到窗体的X,Y坐标
                    var mxRight = minLeft + ev.currentTarget.clientWidth; //最大x轴
                    var mxBottom = minTop + ev.currentTarget.clientHeight; //最大y轴
                    var mouseX = ev.clientX; //鼠标x轴位置
                    var mouseY = ev.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
                    //鼠标y轴位置            
                    //判断鼠标移动在父类容器中,子类容器在移动。
                    if (((minLeft + mxLeft1) > minLeft && (minLeft + mxLeft1) <= mxRight - 50) && ((minTop + mxTop1) > minTop && (minTop + mxTop1) <= mxBottom - 50)) {
                        $("#divMo").offset({ "top": (minTop + mxTop1), "left": (minLeft + mxLeft1) });
                    }
                });
            })

     event的这些属性,以前研究不清楚,现在终于懂点了,虽然没什么技术含量,但是望给大家点帮助。
    其实,上面的方法可以用这个来实现,并且更明了,就是获得鼠标的坐标。大家看下吧。

          $(function () {
              var box = document.getElementById("divMove");
                   var minWidth = box.offsetLeft;
                     var minHeight = box.offsetTop;
                    var maxWidth = box.clientWidth + minWidth;
                     var maxHeight = box.clientHeight + minHeight;
                      $("#divMove").mousemove(function (event) {
                          var event = event || window.event;
                         var iL = event.clientX;
                         var iT = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
                         if (iL > minWidth && iL < maxWidth - 50 && iT > minHeight && iT < maxHeight - 50) {
                               $("#divMo").offset({ top: iT, left: iL });
                          }
                       });
                   }) 
    

     有什么更好的建议,或者说的不对的,请指出来,谢谢了。

  • 相关阅读:
    qemu的几篇文章---涉及qemu的注入
    网络以及linux相关--重点参考--包含相关linux服务的部署和使用
    ipv6的相关情况简略说明
    向日葵服务器相关ip,通过ipset过滤(oray.com oray.net),可能不完整,需要dnsmasq ipset持续监听相关域名
    linux shell重要参考网站
    web信息收集分类
    针对管理员的信息收集 以及 它的意义
    目标网站弱点功能探测
    网站文件目录探测
    目标后台探测以及物理路径探测
  • 原文地址:https://www.cnblogs.com/waters/p/2406362.html
Copyright © 2011-2022 走看看