前端JavaScript编写鼠标事件的完整指南

// 方式1：addEventListener（推荐）
document.getElementById('btn').addEventListener('click', function(e) {
    console.log('点击了');
});
// 方式2：on事件属性（简单场景可用）
<button onclick="alert('点击了')">点我</button>
// 方式3：内联事件（不推荐，维护性差）
<div onmouseover="this.style.background='red'">悬停变红</div>

element.addEventListener('click', function(e) {
    console.log(e.clientX, e.clientY);  // 鼠标相对于视口的坐标
    console.log(e.pageX, e.pageY);      // 鼠标相对于文档的坐标
    console.log(e.target);              // 触发事件的元素
    console.log(e.button);              // 哪个键：0左键，1中键，2右键
});

var box = document.getElementsByClassName("sliding_block")[0];
var isDrop = false;
var angle = 0;

// 按下：开始拖拽
box.onmousedown = function(e) {
    var e = e || window.event;
    var x = e.clientX - box.offsetLeft;
    var y = e.clientY - box.offsetTop;
    isDrop = true;
};

// 移动：实时更新位置和角度
document.onmousemove = function(e) {
    if (!isDrop) return;
    
    var e = e || window.event;
    var moveX = e.clientX - x;
    
    // 限制范围 0~360
    var minX = 0, maxX = 360;
    if (moveX < minX) moveX = minX;
    if (moveX > maxX) moveX = maxX;
    
    box.style.left = moveX + "px";
    angle = moveX;
    
    $("#baidu_img").attr("style", "transform: rotate(" + angle + "deg);");
    $("#msg_angle_span").html(angle);
};

// 松开：结束拖拽
document.onmouseup = function() {
    isDrop = false;
};

document.addEventListener('wheel', function(e) {
    // 避免在输入框中触发
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
        return;
    }
    
    e.preventDefault();  // 必须加，否则页面会跟着滚
    
    if (e.deltaY > 0) {
        next_img();      // 滚轮向下 → 下一张
    } else {
        last_img();      // 滚轮向上 → 上一张
    }
}, { passive: false });  // passive: false 是关键

var floatingDiv = document.getElementById('floatingDiv');
var initialX = null, initialY = null;

floatingDiv.addEventListener('mousedown', function(e) {
    initialX = e.clientX - floatingDiv.getBoundingClientRect().left;
    initialY = e.clientY - floatingDiv.getBoundingClientRect().top;
    e.preventDefault();  // 防止选中文本
});

document.addEventListener('mousemove', function(e) {
    if (initialX === null) return;
    
    var deltaX = e.clientX - initialX;
    var deltaY = e.clientY - initialY;
    
    floatingDiv.style.left = deltaX + 'px';
    floatingDiv.style.top = deltaY + 'px';
});

document.addEventListener('mouseup', function() {
    initialX = null;
    initialY = null;
});

// ❌ 不推荐：进入子元素会反复触发
div.addEventListener('mouseover', function() {
    this.style.background = 'yellow';
});

// ✅ 推荐：只在进入/离开 div 时触发一次
div.addEventListener('mouseenter', function() {
    this.style.background = 'yellow';
});
div.addEventListener('mouseleave', function() {
    this.style.background = '';
});

var ticking = false;
document.addEventListener('mousemove', function(e) {
    if (!ticking) {
        requestAnimationFrame(function() {
            // 在这里写业务逻辑
            ticking = false;
        });
        ticking = true;
    }
});

.sliding_block {
    user-select: none;
    -webkit-user-select: none;
}

// ✅ 正确
box.onmousedown = function() { ... };
document.onmousemove = function() { ... };  // 绑在 document 上
document.onmouseup = function() { ... };    // 绑在 document 上

// ❌ 错误
box.onmousemove = function() { ... };  // 鼠标移出滑块就失效

// ❌ 后面的会覆盖前面的
btn.onclick = function() { alert(1); };
btn.onclick = function() { alert(2); };  // 只会弹出 2

// ✅ 用 addEventListener 可以绑定多个
btn.addEventListener('click', function() { alert(1); });
btn.addEventListener('click', function() { alert(2); });  // 两个都会执行