前端提高篇(九十四)：jQuery滑鼠事件

總起：
click / dblclick / contextmenu / event.which
mouseenter / mouseleave / mouseover / mouseout / mousedown / mousemove / mouseup

另附：
1.jQuery可以對一組標簽系結事件，js需要一個個回圈遍歷再系結;
2.jQuery系結了事件，用一個函式處理這個事件，函式中的this指的是觸發事件的那個原生元素；如果要使用jQuery封裝的函式，需要轉成jQuery物件：$(this)

正文：

1.dblclick()：滑鼠雙擊

demo：雙擊顯示小心心

img {
    width: 30px;
    height: 30px;
    position: absolute;
    margin-left: -15px;
    margin-top: -15px;
}/*為了讓點擊的位置是圖片的中心，提前寫了margin，在添加時再根據滑鼠位置定位top和left*/

<h2>雙擊顯示小心心</h2>

$(document).dblclick(function(e){
    $('body').append('<img src="./img/1.png" alt="" style="left:' + 
    e.pageX + 'px;' + 'top:' + e.pageY + 'px;">')
})

效果：

2.event.which與contextmenu()

event.which：可以判斷滑鼠哪個鍵按下了
contextmenu()：取消右鍵時出現的選單
左鍵回傳1，滾輪回傳2，右鍵回傳3
當滑鼠右鍵時，顯示小心心

$(document).contextmenu(function(e){
    return false;
})//右鍵時出現的選單取消掉，e雖然沒有用，但一定要有
$(document).mousedown(function(e){
    if (e.which == 3){
        $('body').append('<img src="./img/1.png" alt="" style="left:' + 
    e.pageX + 'px;' + 'top:' + e.pageY + 'px;">')
    }
})

沒有取消選單時，右擊會是這樣：

取消掉，右擊會是這樣：

我的小心心圖是這樣的，本身有兩個心心，所以點一下有兩個心心：

3.mouseenter() / mouseleave() / mouseover() / mouseout()

前兩個不會冒泡
后兩個冒泡

<div class="wrapper">
    <div class="box">box</div>
</div>

3.1 mouseenter / mouseleave：

$('.box').mouseenter(function(){
    console.log('enter');
}).mouseleave(function(){
    console.log('leave');
})//給box系結mouseenter和mouseleave事件

$('.wrapper').mouseenter(function(){
    console.log('enter-wrapper');
}).mouseleave(function(){
    console.log('leave-wrapper');
})//給wrapper系結mouseenter和mouseleave事件

效果：
1.當滑鼠進入wrapper（或重繪時已在wrapper區域，然后動一下）時，觸發wrapper的enter事件；
2.當滑鼠進入box區域時，觸發box的enter事件，沒有觸發wrapper的enter事件，leave同理，說明這兩個事件是不冒泡的（父子設定同樣的事件，子觸發，父不觸發）

3.2 mouseover / mouseout

$('.box').mouseover(function(){
    console.log('over');
}).mouseout(function(){
    console.log('out');
})//給box系結mouseover和mouseout事件

$('.wrapper').mouseover(function(){
    console.log('over-wrapper');
}).mouseout(function(){
    console.log('out-wrapper');
})//給wrapper系結mouseover和mouseout事件

效果：
1.當我滑鼠從wrapper外部進入（或重繪時滑鼠已在wrapper區域然后滑鼠動一下）時，觸發wrapper的over事件；
2.滑鼠移動到box區域，同時觸發wrapper的mouseout事件、box的mouseover事件、wrapper的mouseover事件
3.當滑鼠移開box區域到wrapper區域，觸發box的mouseout事件、wrapper的mouseout事件、wrapper的mouseover事件
4.所以這兩個事件是冒泡的，進入box時，box(子)和wrapper(父)的over事件都被觸發
5.另外，從wrapper移動到box區域時，還觸發了wrapper的out事件，即系統認為此時離開wrapper，進入box

4.mousedown / mousemove / mouseup

可以實作滑鼠拖拽元素進行移動的效果
為防止滑鼠移動過快，脫離系結事件的元素，mousemove一般系結在document上，而不是系結在移動元素上

.box {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background: pink;
}/* 設定了postion，left和top才有意義 */

<div class="box">box</div>

$('.box').mousedown(function(e){
    var offset = $(this).offset();
    var dis = {}
    dis.x = e.pageX - offset.left;
    dis.y = e.pageY - offset.top;
    var _this = this;//保存this，后面呼叫不直接使用div.box，提高內聚性
    $(document).mousemove(function(e){
        $(_this).css({
            left: e.pageX - dis.x,
            top: e.pageY - dis.y
        })
    }).mouseup(function(e){
        $(this).off('mousemove mouseup');
    })//滑鼠抬起之后取消這兩個滑鼠事件
    return false;
    //防止選中文字，對文字拖拽
})

4.1 關于位置計算：

我們要做的，是根據滑鼠移動的位置，設定box的left和top，讓box跟著滑鼠動，且滑鼠不是在最左上角（看起來好看.jpg）

1.滑鼠一開始點中box的某個位置，比如中心位置，此時可以獲取滑鼠的坐標(e.pageX, e.pageY)，但滑鼠的坐標不一定與box的left、top值一致，除非滑鼠剛好點在box的最左上角
所以，當box跟著滑鼠移動時，需要計算這部分差值，才能正確設定box的位置
2.滑鼠點擊box之后移動，如果一開始點擊在box中心，滑鼠停止移動時還是在box中心的，即滑鼠與box的相對定位是固定的
所以，滑鼠移動之后，坐標減去這段相對距離即可

4.2 關于善后

1.當滑鼠抬起時，取消滑鼠移動和滑鼠抬起事件，這樣box就不會再跟著滑鼠走了
2.建議在mousedown事件最后加一句：return false;，否則當滑鼠點擊不小心選中了文字，瀏覽器會以為要拖拽這段文字，就像這樣：

加了return false就不會有這種情況