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

时间 2021-04-04

标签对象事件文档 get function class cli sed 栏目 JavaScript 繁體版

原文原文链接

鼠标移动：mousemove对象

鼠标按下：mousedown事件

鼠标释放：mouseupip

点击事件：click文档

<body>get

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

<script>function

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

　　box.onmousedown=function(e){cli

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

　　}

　　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>

事件委托：将子元素将要执行的事件委托给父元素，父元素执行事件时，经过事件对象，来判断是哪一个子元素触发的事件。

事件冒泡：事件由内部向外部传播，外层若是有相同的事件，也会触发