这是我参与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一下,就不赘述了。