前端自定义拖拽如何封装鼠标事件?

[0f2e3z8n4z]

百度 ife2017 里面有这么一道题，实现一个图片裁剪器。

传送门 http://ife.baidu.com/course/detail/id/37

我的疑问是关于这个裁剪框。

我的需求：

这个裁剪框是拖拽生成出来的，可以通过边框上的点拖拽改变高度和宽度，可以移动。

我的思路：

自然是绑定相应相应的事件。 mousedown ， mousemove ， mouseup 。

1. 拖拽框的父元素应该绑定三个事件 down ， move ， up 。没毛病。 2.拖拽框自身也要绑定事件，同上。 3.拖拽框上的调整点也要绑定事件吧，因为要通过拖动改变大小 3.都使用事件冒泡

问题：

1. 然后我发现写的 function Clipper(){}里面有一大坨 element.addEventListener()，这个应该怎么写才优雅？
2. 然后我上 github 上看看类似的代码，发现有一些是把 move 和 up 事件都绑定到 document ， down 事件绑定到元素上。这样做应该会有优化？
3. 还有，绑定完的事件在 mouseup 的时候是不是要移除掉？
4. 我还看到有人把 move 这个事件嵌套到 down 事件的回调函数里面，这样写是正确的吗，这样写，是不是因为出于要 down 了才能 move 这个原因？绑定事件还要看时机？

暂时不考虑 H5 的 drag and drop

所以应该怎么样写才好？

谢谢大家 : )

[0f2e3z8n4z]

Clipper 是我封装的图片裁剪器

[otakustay]

拖拽的思路都是 mousedown 绑在要拖的元素上，触发时在 document 上绑定 mousemove 和 mouseup ， up 时注销 document 上的事件，这样保证不会鼠标动太快移出元素事件丢失
另外 ie 有 setCapture 功能， ff 有类似的，自己搜吧

[0f2e3z8n4z]

@otakustay 好的 thx