1. 程式人生 > >Javascript和jquery事件--鼠標移動事件mousemove

Javascript和jquery事件--鼠標移動事件mousemove

lis 應該 mov 資源 左移 color class () times

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: 向上移動為正數,向下移動為負數

Javascript和jquery事件--鼠標移動事件mousemove