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 });
                      }
                   });
               }) 

 有什么更好的建議,或者說的不對的,請指出來,謝謝了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM