图片img或者含有img元素拖拽时，或者scale缩放时产品的阴影效应问题

图片img或者含有img元素拖拽时，或者用scale缩放时产品的阴影效应问题

html中有图片img或者含有img元素拖拽时，或者scale缩放时产品的阴影效应问题，也就是图片重影，
另外使用scale缩放图片时可能产生放大后图片模糊情况，文章也给出了解决方案

解决方案如下：

效果图：

<div>
	<img src=""/>
</div>

1. 拖拽图片时产生阴影
例如如上代码，在拖动图片会出现重影；如果是添加JS代码实现拖拽功能，则在鼠标按下onmousedown事件内添加event.preventDefault(); 取消默认行为，防止图片阴影效应

 el.onmousedown = (e) => {
    
    
    cancelHandler(e); 
}

 //封装了一个取消默认事件的函数，用来兼容老IE
 function cancelHandler(event){
    
    
      if (event.preventDefault) {
    
    
          event.preventDefault();
      } else {
    
    
          event.returnValue = false;
      }
  }

2. scale缩放图片时产生阴影

错误的缩放写法：

let scaleNum = 1.2;
document.getElementById("bigImg").style.transform = 'scale(' + scaleNum+ ')';

正确的缩放写法：（scale必须加translateZ(0) 防止出现放大后会模糊）

let scaleNum = 1.2;
document.getElementById("bigImg").style.transform = 'translateZ(0) scale(' + scaleNum+ ')';