首页JavaScript-鼠标事件（鼠标点击松开移动效果）

JavaScript-鼠标事件（鼠标点击松开移动效果）

时间: 2023-07-18 20:26:41 浏览: 171

好的，以下是一个简单的示例代码，可以实现鼠标点击、松开和移动时的效果： ```html <!DOCTYPE html> <html> <head> <title>鼠标事件示例</title> <style> #box { width: 100px; height: 100px; background-color: red; position: absolute; left: 0; top: 0; } </style> </head> <body> <div id="box"></div> <script> // 获取元素 var box = document.getElementById("box"); // 定义变量，记录鼠标是否按下 var isMouseDown = false; // 添加鼠标按下事件 box.addEventListener("mousedown", function(event) { // 将变量设置为 true isMouseDown = true; // 记录鼠标按下时的位置 var x = event.clientX; var y = event.clientY; // 添加鼠标移动事件 document.addEventListener("mousemove", moveHandler); // 添加鼠标松开事件 document.addEventListener("mouseup", function() { // 将变量设置为 false isMouseDown = false; // 移除鼠标移动事件 document.removeEventListener("mousemove", moveHandler); }); // 鼠标移动事件处理函数 function moveHandler(event) { if (isMouseDown) { // 计算鼠标移动的距离 var deltaX = event.clientX - x; var deltaY = event.clientY - y; // 更新盒子的位置 box.style.left = parseInt(box.style.left) + deltaX + "px"; box.style.top = parseInt(box.style.top) + deltaY + "px"; // 更新 x 和 y 的值 x = event.clientX; y = event.clientY; } } }); </script> </body> </html> ``` 这段代码定义了一个红色的正方形盒子（100px × 100px），当鼠标按下该盒子并移动时，盒子会跟随鼠标移动。当鼠标松开时，盒子停止跟随移动。

阅读全文