功能
鼠标点击后，box跟随鼠标移动，再次点击后，停止跟随并停留在当前位置。
实现
- 为每个box添加click监听和data-index，data-index的目的是为了明确点击后对谁进行移动。
- 点击box后添加d.mousemove监听和this.移动样式。
- 跟随移动：box的位置 = 鼠标对于浏览器的位置 - box自身一半大小。（e.clientX - box.offsetWidth/2）
- 再次点击后移除mousemove监听和移动样式。
相关属性和方法
- element.classList 获取class列, add添加, remove移除
- element.addEventListener() 添加监听 当回调函数为匿名函数时无法被移除
- element.removeEventListener() 移除监听
- element.getAttribute() 获取属性值
- element.setAttribute() 设置属性值
- .offsetWidth offsetHeight . 包含内边距 ， 边框 的大小，返回的是一个整数。
- clientX 鼠标相对于浏览器的坐标
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
