美文网首页
在浏览器内添加滑动轨迹并打印

在浏览器内添加滑动轨迹并打印

作者: 诗琪Michael | 来源:发表于2024-02-10 07:10 被阅读0次

let isDragging = false; // 标记是否正在拖动
let dragTrack = []; // 用于存储拖动路径的数组

document.addEventListener('mousedown', (event) => {
isDragging = true; // 当鼠标按下时,开始拖动
const timeStamp = Date.now();
dragTrack = [{x: event.clientX, y: event.clientY,time: timeStamp}]; // 初始化轨迹数组并记录起始点
console.log('down', {x: event.clientX, y: event.clientY,time: timeStamp})
});

document.addEventListener('mousemove', (event) => {
if (isDragging) {
// 如果正在拖动,记录当前鼠标位置
const timeStamp = Date.now();
dragTrack.push({x: event.clientX, y: event.clientY, time: timeStamp});
console.log('move', {x: event.clientX, y: event.clientY,time: timeStamp})
}
});

document.addEventListener('mouseup', (event) => {
if (isDragging) {
isDragging = false; // 停止拖动
const timeStamp = Date.now();
dragTrack.push({x: event.clientX, y: event.clientY, time: timeStamp}); // 记录最后一个点
console.log('up', {x: event.clientX, y: event.clientY,time: timeStamp})
console.log('拖动轨迹:', dragTrack); // 输出或处理拖动轨迹
// 在这里可以调用一个函数来处理或者展示拖动轨迹,例如绘制轨迹
}
});

相关文章

网友评论

      本文标题:在浏览器内添加滑动轨迹并打印

      本文链接:https://www.haomeiwen.com/subject/potradtx.html