js DOM : 鼠标事件

任何事件都有有一个事件对象，该对象作为事件函数的第一个参数

鼠标进入事件：onmouseover 、onmouseenter

鼠标移出事件：onmouseout 、onmouseleave

鼠标移动事件：onmousemove

事件绑定

var layer = document.getElementById('layer');
// 鼠标坐标是相对于layer元素的
// 鼠标进入事件
layer.onmouseenter = function (e) {// e : 事件对象// 获取鼠标进入时的坐标var x = e.offsetX; // 横坐标var y = e.offsetY; // 纵坐标
}
// 鼠标移动事件
layer.onmousemove = function (e) {// 获取鼠标移动时的坐标var x = e.offsetX;var y = e.offsetY;conole.log('鼠标移动啦');
}
// 鼠标离开事件
layer.onmouseleave = function (e) {console.log('鼠标离开');
}

鼠标点击事件

鼠标按下事件：onmousedown

// 鼠标按下事件
var circle = document.querySelector('.circlr');circle.onmousedown = function (e) {// 获取鼠标按下时鼠标的坐标var x = e.offsetX;var y = e.offsetY;// 鼠标按下移动时触发鼠标移动事件，实现点击拖动效果circle.onmouemove = function (event) {// 获取鼠标移动时的坐标var x = event.offsetX;var y = event.offsetY;}
}

鼠标松开事件：onmouseup

circle.onmouseup = function () {// 鼠标松开时清除鼠标移动事件circle.onmousemove = null;
}

鼠标按键键码事件：左键 : 0 、中键（按击滚轮）: 1、右键 : 2

document.onmousedown = function (e) {console.log(e.button);//  鼠标左键点击输出 0 ;//  鼠标中键（按下滚轮）点击输出 1 ;//  鼠标右键点击输出 2 ;
}

禁止鼠标右键菜单

document.oncontextmenu = function () {// 禁止右键菜单return false;
}

双击事件：每一次单击时间不能超过350ms ==> 元素.ondbclick = function () {}

// 文档页面双击
document.ondbclick = function () {console.log("鼠标双击啦！");
}

js DOM : 鼠标事件相关推荐

java 中鼠标事件_[Java教程]js中鼠标事件总结
[Java教程]js中鼠标事件总结 0 2017-07-11 00:00:19 js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblc ...
js的鼠标事件（JavaScript的鼠标事件，vue的鼠标事件）
js鼠标事件,相关属性: var div = document.getElementById("box")// 1.单击事件 onclickdiv.onclick = functi ...
js常用鼠标事件和键盘事件
常用鼠标事件鼠标事件触发 onclick 点击左键 onmouseover 鼠标经过 onmouseout 鼠标离开 onfocus 获得鼠标焦点 onblur 失去鼠标焦点 onmousemov ...
Js之鼠标事件-鼠标事件
一 .常用到的鼠标事件类型事件 click 单机鼠标左键时发生,如果右键也按下则不会发生 dbclick 双击鼠标左键时发生,如果右键也按下则不会发生 mousedown 单击任意一个鼠标按钮时发 ...
Web前端js中鼠标事件
0 onmousemove鼠标在某元素上移动 0 onmouseover鼠标移到某元素之上(事件冒泡): 0 onmouseout鼠标移出某元素: 0 omouseleave鼠标离开某元素: 0 on ...
niceScroll.js 拖动鼠标事件回调
https://blog.csdn.net/chuangxin/article/details/92842917 nicescroll事件回调以滚动scrollend回调为例,有2种实现方式: 方式 ...
搭建自己的base.js(2)-其他事件方法
获取鼠标按键 // 获取鼠标按键,getButton:function(event) {//DOM,先检测是否支持DOM鼠标事件if(document,implementation.hasFeatur ...
面试题58：javascript中鼠标事件有哪些
鼠标事件有: 1.click(单击)事件: 2.dblclick(双击)事件: 3.mousedown事件: 4.mouseup事件: 5.mouseout事件: 6.mouseover事件: 7.m ...
HTML DOM 事件 —— 鼠标事件 JS鼠标事件
鼠标事件 onclick 当用户点击某个对象时调用的事件句柄. ondblclick 当用户双击某个对象时调用的事件句柄. oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发.. on ...

js DOM : 鼠标事件

js DOM : 鼠标事件相关推荐

最新文章

热门文章