js键盘,默认,拖拽事件

139 阅读1分钟
  • okeydown键盘按下的时候触发

  • onkeypress连续敲击的时候触发

  • onkeyup键盘抬起的时候触发

  • 顺序onkeydown>onkeypress>onkeyup

  • onload事件在资源被加载完成后会被触发

  • onresize 事件会在窗口或框架被调整大小时发生

取消默认事件两种用法

  • return false

  • preventDefault

文档到x,y轴的距离位置

<script>

 let div1 = document.getElementById('div1')
 div1.onclick = function (e){             
/* 鼠标在文档(是文档document不是div1)的X轴的位置 */     
 console.log(e.clientX);                
 /* 鼠标在文档(是文档document不是div1)的Y轴的位置 */    
 console.log(e.clientY);                 
}                                        
</script>

拖拽事件

 let div1 = document.getElementById('div1')
 div1.onmousedown = function (e){
 /* 按下的时候 获取点的位置到盒子边界距离 */
 let areaX = e.clientX - div1.offsetLeft;
 let areaY = e.clientY - div1.offsetTop;
 document.onmousemove = function (e){
 /* 移动的时候获取的client的动态距离 - 盒子内点的到边缘的固定距离 */
 /* 最后获得的 就是盒子到文档的距离 */
 div1.style.left = e.clientX - areaX + 'px'
 div1.style.top = e.clientY - areaY + 'px'
   }
 }
 div1.onmouseup = function (){
 document.onmousemove = null;//空值
 }