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

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

1、鼠標事件code

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

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

　　2. onmouseup事件，當鼠標左鍵擡起時觸發。如：鼠標按下以前元素box1背景顏色爲紅色，當按下以後變爲綠色，放開以後又變爲紅色。blog

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

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

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時，背景顏色改成綠色，移出元素後又變爲紅色。　　get

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

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

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

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

2、手機觸摸事件event

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

3、手機手勢事件

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

4、重力感應事件

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