關於鼠標事件和手機中的各個事件的幾點總結

今天就來盤點一下鼠標的事件和手機觸摸事件。

一、鼠標事件

1. onmousedown事件，當鼠標左鍵按下時觸發。 如：當鼠標元素boxq1上按下時，改變它的背景顏色。

var box1 = document.getElementById("box1");
　　box1.onmousedown = function(){
　　box1.style.backgroundColor = 'green';
};

　　2. onmouseup事件，當鼠標左鍵抬起時觸發。如：鼠標按下之前元素box1背景顏色為紅色，當按下之后變為綠色，放開之后又變為紅色。

var box1 = document.getElementById("box1");
box1.onmousedown = function(){
　　box1.style.backgroundColor = 'green';
};
box1.onmouseup = function(){
   box1.style.backgroundColor = 'red';
};

　　3. onmousemove事件，當鼠標在元素上移動時觸發。如：鼠標在元素box1上移動時，控制台輸出鼠標的位置。

box1.onmousemove = function(e){
    var x = e.pageX;
    var y = e.pageY;
    console.log('鼠標橫坐標為：'+x+'******鼠標縱坐標為：'+y);
};

　　4. onmouseenter事件，當鼠標進入元素的瞬間觸發，僅在鼠標進入元素時觸發。如：鼠標在進入元素box1時，元素背景顏色改為綠色。

　　　　它與onmousedown事件區別在於：后者是再按下的瞬間觸發，而前者是在進入元素瞬間才觸發，也就是說鼠標在元素邊界上才觸發。

var box1 = document.getElementById("box1");
box1.onmouseenter = function(){
    box1.style.backgroundColor = 'green';
};

　　5. onmouseleave事件，當鼠標移出元素的瞬間觸發，僅在鼠標移出元素時觸發，發生在元素邊界。如：鼠標在進入元素box1時，背景顏色改為綠色，移出元素后又變為紅色。　　

var box1 = document.getElementById("box1");
box1.onmouseenter = function(){
    box1.style.backgroundColor = 'green';
};
box1.onmouseleave = function(){
    box1.style.backgroundColor = 'red';
};

　　6. onmouseover事件，當鼠標在元素之上的時候觸發，只要鼠標留在元素之上就會觸發，僅觸發一次，不管鼠標是否移動，這是它和onmousemove的區別。如：鼠標在元素box1上時一直在控制台輸入數字一。

box1.onmouseover = function(){
    console.log(new Date());
};

 　　7. onmouseout事件，當鼠標離開目標元素是觸發，效果和原理與mouseleave沒有什么區別，只是在Firefox下沒有onmouseenter和onmouseleave，只能使用onmouseover和onmouseout；而在IE中便可使用onmouseennter和onmouseleave來代替前兩個。

 二、手機觸摸事件

　　1. ontouchstart事件，觸摸開始事件，當手機屏幕被觸摸的瞬間觸發。如：當觸摸手機的瞬間輸出當前觸摸的位置坐標。

var box1 = document.getElementById("box1");
box1.ontouchstart = function(e){
    var touch = e.touches[0];
    var x = Number(touch.clientX);
    var y = Number(touch.clientY);
    console.log("當前觸摸點的橫坐標"+x+"*****當前觸摸點的縱坐標"+y);
};

　　2. ontouchmove事件，觸摸的整個過程觸發，當手指在屏幕上移動的時候觸發。如：當手指在屏幕上移動的時候獲取當前觸摸位置。

 

var box1 = document.getElementById("box1");
box1.ontouchmove = function(e){
    var touch = e.touches[0];
    var x = Number(touch.clientX);
    var y = Number(touch.clientY);
    console.log("當前觸摸點的橫坐標"+x+"*****當前觸摸點的縱坐標"+y);
};

　　3. ontouchend事件，觸摸結束的瞬間觸發，即當手指離開屏幕時觸發。如：當手指離開屏幕時，改變元素的背景顏色。

var box1 = document.getElementById("box1");
    box1.ontouchstart = function(e){
    var touch = e.touches[0];
    box1.style.backgroundColor = 'green';
};

　　4. ontouchcancel事件，觸摸過程被系統取消時觸發，當一些更高級別的事件發生的時候（如電話接入或者彈出信息）會取消當前的touch操作，即觸發ontouchcancel。一般會在ontouchcancel時暫停游戲、存檔等操作。

注意事項：

手機觸摸事件獲得焦點區別：

原生寫法：

var e = window.event;

var touchs = e.touches[0]; 

var startX = Number(touchs.pageX);

jQuery寫法:

var e = window.event;

var touchs = e.originalEvent.targetTouches[0];//獲得第一個觸點

var startX = Number(touchs.pageX);

三、手機手勢事件

　　1. ongesturechange事件，必須是多點觸摸才可觸發事件，比如手機中的旋轉、縮放等操作。如：

var div = document.getElementById("div");
div.ongesturechange = function(e){
    //scale代表手勢產生的縮放比例，小於1是縮小，大於1是放大，原始為1
    var scale = e.scale;
    //rotation代表旋轉手勢的角度，值區間[0,360]，正值順時針旋轉，負值逆時針
    var angle = e.rotation;
};

四、重力感應事件

　　1. 重力感應事件其實是利用了window.orientation事件，通過判斷手機是橫屏還是豎屏來實現重力感應效果。只需要為body節點添加onorientationchange事件即可。在此事件中由window.orientation屬性得到代表當前手機方向的數值。window.orientation的值列表如下：
　　0：與頁面首次加載時的方向一致
　　-90：相對原始方向順時針轉了90°
　　180：轉了180°
　　90：逆時針轉了90°