谈谈几个近期遇到的小bug

这是我参与12月更文挑战的第18天，活动详情查看：2021最后一次更文挑战

小白最近有项目在提测，改bug的同时也发现了很多平时没有注意到的细节，来给大家分享一下：

translate 与 scale

transform 的 scale 和 translateX 一起使用时，translateX 真实的位移距离，是受 scale 缩放比影响的，比方说：

transform: scale(0.5) translateX(100px)；

其真实位移距离其实是 100px * 0.5 = 50px，大家如果需要计算位移，记得要注意缩放比这个点。

top也可以使用百分比值

本次遇到的问题是，父元素（以下简称A）包含着子元素（以下简称a），a的高度位置，需要相对于A定位，定位在A的底部，如图：

此时，只需要子元素相对父元素定位，top:100%;，即可定位到底部。

这个问题看似简单，为什么单拎出来说呢，因为这是个线上的历史bug，前同事用的是bottom定位，给的是bottom:-20px; ，但是这个元素a有个问题，就是它的高度随着A元素的拖拽，可能会因为换行，变成40px，此时bottom:-20px; 就不够用了，会出现a遮挡A20px的情况，还有一种情况是给bottom:-40px; ，如果高度变成了20px，则A和a之间又会出现20px的间隙，因此在高度不确定的情况下，是不适合使用bottom定位的。

mouseUp事件，不触发

jQuery 拖拽事件中，鼠标抬起时，不一定会触发mouseUp事件，导致被拖拽的元素粘在鼠标上。

大家之前可能也遇到过类似的问题，常见的触发场景有3个：

1.拖拽事件被选中，此时要设置元素禁止被选中属性：

user-select：none;
复制代码

2.触发了浏览器的drag事件，需要阻止冒泡和默认事件：

if(e.stopPropagation){
    e.stopPropagation();
}else{
    e.cancelBubble=true;
}
if(e.preventDefault){
    e.preventDefault();
}else{
    e.returnValue=false;
}
复制代码

3.鼠标移出了操作区，触发了 mouseleave 事件，这种情况下需要监听 mouseleave 事件。

而我遇到的场景比较复杂，需要hack一下，就不赘述了。