青浦专业做网站公司,网站前置审批项 教育,上海网站建设哪家,设计素材免费下载首先我们先简单过一遍鼠标MouseEvent事件#xff1a;
click: 当鼠标单击元素时触发。dblclick: 当鼠标双击元素时触发。mousedown: 当按下鼠标按钮时触发。mouseup: 当释放鼠标按钮时触发。mousemove: 当鼠标指针在元素上移动时触发。mouseover: 当鼠标指针移动到元素上方时触…首先我们先简单过一遍鼠标MouseEvent事件
click: 当鼠标单击元素时触发。dblclick: 当鼠标双击元素时触发。mousedown: 当按下鼠标按钮时触发。mouseup: 当释放鼠标按钮时触发。mousemove: 当鼠标指针在元素上移动时触发。mouseover: 当鼠标指针移动到元素上方时触发。mouseout: 当鼠标指针移出元素时触发。contextmenu: 当用户在元素上点击鼠标右键时触发上下文菜单事件。 执行顺序mousedown — mouseup — click
鼠标事件中的有很多属性用于获取鼠标在不同坐标系下的位置信息包括但不限于
clientX、clientY: 鼠标相对于浏览器窗口客户区域的坐标。offsetX、offsetY: 鼠标相对于触发事件的元素的内边距边界的坐标。layerX、layerY: 鼠标相对于触发事件的元素的边框边界的坐标已废弃。pageX、pageY: 鼠标相对于整个页面左上角的坐标。screenX、screenY: 鼠标相对于电脑屏幕左上角的坐标。
使用场景
当需要获取鼠标相对于页面或浏览器窗口的坐标时可以使用pageX和pageY。当需要获取鼠标相对于触发事件的元素的坐标时可以使用clientX和clientY或者offsetX和offsetY。当需要获取鼠标相对于屏幕的坐标时可以使用screenX和screenY。 代码示例
document.addEventListener(mousemove, function(event) {console.log(pageX: event.pageX , pageY: event.pageY);console.log(clientX: event.clientX , clientY: event.clientY);console.log(offsetX: event.offsetX , offsetY: event.offsetY);console.log(screenX: event.screenX , screenY: event.screenY);
});
推荐博文
js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY_js event layery-CSDN博客
