其他分享
首页 > 其他分享> > js鼠标移动、鼠标按下、鼠标释放和点击事件。

js鼠标移动、鼠标按下、鼠标释放和点击事件。

作者:互联网

鼠标移动:mousemove

鼠标按下:mousedown

鼠标释放:mouseup

点击事件:click

<body>

<div class="box"></div>

<script>

  var box=document.getElementById("box");

  box.onmousedown=function(e){

   box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY

  }

  box.onmouseup=function(e){

   box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY

  }

  box.onmousemove=function(e){

   box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY

  }

  

  box.onclick=function(e){

   box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY

  }

//当鼠标按下,鼠标释放,和点击事件同时执行的时候,系统依次执行鼠标按下、鼠标释放、鼠标点击。

//获取X、Y的位置有两种方法。

1.    e.clientX  e.clientY   此方法是按照窗口左上角为原点进行获取的。

2.    e.pageX  e.pageY   此方法是按照文档左上角为原点进行获取的。

 

</script>

</body>

事件委托:将子元素将要执行的事件委托给父元素,父元素执行事件时,通过事件对象,来判断是哪个子元素触发的事件。

事件冒泡:事件由内部向外部传播,外层如果有相同的事件,也会触发

标签:box,clientX,鼠标,clientY,位置,js,按下,事件
来源: https://www.cnblogs.com/zlf19971012/p/14616771.html