滚轮事件、拖曳

滚轮事件

• 当鼠标滚轮滚动时，JavaScript可以监听到，称之为滚轮事件
• Chrome，IE：DOM0级事件 onmousewheel wheelDelta 120表示向上 -120表示向下
• Firefox：DOM2级事件 DOMMouseScroll detail 3表示向下 -3表示向上

// 当鼠标滚轮滚动时，JavaScript可以监听到，称之为滚轮事件。
// Chrome，IE：DOM0级事件 `onmousewheel`  wheelDelta 120表示向上 -120表示向下
// document.onmousewheel = function (e) {
    
    
//     e = e || window.event;
//     console.log(e);
//     console.log(e.wheelDelta);
//     // console.log('mousewheel');
// }

// Firefox：DOM2级事件 `DOMMouseScroll` detail 3表示向下 -3表示向上
document.addEventListener('DOMMouseScroll', function (e) {
    
    
    console.log(e);
    console.log(e.detail);
});


// Chrome
document.onmousewheel = fun;
// Firefox
document.addEventListener('DOMMouseScroll', fun);
function fun (e) {
    
    
    var direction; // 方向 1表示下  -1表示上
    e = e || window.event;
    
    if (e.wheelDelta) {
    
     // chrome
        if (e.wheelDelta > 0) {
    
     // 上
            direction = -1;
        } else {
    
     // 下
            direction = 1;
        }
    } else {
    
     // firefox
        if (e.detail > 0) {
    
     // 下
            direction = 1;
        } else {
    
     // 上
            direction = -1;
        }
    }
    console.log(direction);
    // return direction;
}

拖拽

// 拖拽：鼠标按下元素，当鼠标移动时元素跟随移动，鼠标抬起元素停止跟随。
// 鼠标按下事件，鼠标移动事件，鼠标抬起事件
var box = document.getElementById('box');
box.onmousedown = function (e) {
    
    
    e = e || window.event;
    // 计算误差(鼠标按下瞬间，鼠标距离box元素的距离)
    var deltaX = e.clientX - box.offsetLeft;
    var deltaY = e.clientY - box.offsetTop;
    document.onmousemove = function (e) {
    
    
        e = e || window.event;
        // 获取鼠标的位置，减去误差，再赋值
        box.style.left = e.clientX - deltaX + 'px';
        box.style.top = e.clientY - deltaY + 'px';
    }
}
// 鼠标抬起，取消移动事件
document.onmouseup = function () {
    
    
    document.onmousemove = null;
}