pc端拖拽时mouseup事件丢失

作为一个不停撞墙成长的小小前端码农，“尝试”着去解决问题，当解决问题后那种释然让我可以有更多的兴趣，不断成长，更加的坚持不懈。

在实现pc端拖拽左右移动元素时，使用mousedown+mousemove+mouseup实现左右拖拽移动，操作多次是总会出现不进入mouseup事件，导致无法清除mousemove事件。

1.第一次尝试

由于我要拖拽的元素中有图片，于是猜测是否浏览器默认行为变成拖拽图片，于是给图片添加不允许拖拽的属性：

<img src="xxx" draggable="false" />

加入后发现确实一定程度上减少了拖拽图片的发生，但仍然会出现不进入mouseup

第二次尝试

猜测：不进入mouseup事件或许在mousemove事件后进入了别的什么事件。例如取消事件。
经过查询鼠标事件发现可以尝试用mouseleave事件来清除mousemove。于是多加了个监听mouseleave事件来清除mousemove。

第三次尝试

猜测：加入mouseleave后确实比较少出现不清除mousemove事件了，但还是不理想。还是回到一开始的猜测，浏览器似乎在进行拖拽元素，像是拖拽里面的文字或图片，百思不得其解。最后多方搜查告诉了我答案：
众所周知，浏览器鼠标事件有默认行为，例如事件冒泡等其他行为。我们只需在mousedown以及mousemove事件中把这些默认行为禁止掉即可。
以下是停止默认行为代码（兼容写法）：

e = e || window.event;
//这两个IE9以下不支持
if(e.stopPropagation) {
e.stopPropagation();
}
if(e.preventDefault) {
e.preventDefault();
}
//下面两个谷歌在新版本已经支持，火狐不支持
e.cancelBubble = true;
e.returnValue = false

更新

之前的第一次尝试猜测只解决了图片的拖拽，后面也在事件中停止默认行为代码，附加一条需要在监听元素上加上css:user-select: none;防止其text选中移动影响mouseup事件。

插播情感

闲暇时总觉得自己是否适合这份工作，遇到难题时总怀疑自我，为什么那么笨，别人应该一下子就解决了吧。
或者这个难题感觉应该很简单，但我却要花上大半天的时间才能解决问题，解决问题后很开心，下班回家的途中我又在想，这么慢，被别人发现这么简单的问题解答了那么久谁也不会想招聘你。
或者是自己去学习一些自己的短板时候，一整天学习下来发现自己根本搞不懂。
但是我总是想去“尝试”着去学习尽量多的知识，解决更多的我没做过的东西，我喜欢那种解答问题后释然的心情，也喜欢经过几个月的删删改改完善后“我”完成的项目…
勉励自己，成长的脚步虽慢，但起码心还是笃定的，知道方向在哪里，我不是已经幸运很多。
记录下来说不定以后就忘记了呢~（我可真是个小机灵鬼）