目录
一、鼠标事件
1、鼠标事件的常用方法
(1)鼠标事件常用方法
onclick | 单击鼠标左键时触发 |
onfocus | 获得鼠标指针焦点触发 |
onblur | 失去鼠标指针焦点触发 |
onmouseover | 鼠标指针经过时触发 |
onmouseout | 鼠标指针离开时触发 |
onmousedown | 当按下任意鼠标按键时触发 |
onmouseup | 当释放任意鼠标按键时触发 |
onmousemove | 在元素内当鼠标指针移动时持续触发 |
(2) 禁止鼠标右击菜单:contextmenu
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
})
主要控制应该何时显示上下文菜单,主要应用于程序员取消默认的上下文菜单
(3)禁止鼠标选中:selectstart
selectstart事件是鼠标开始选择文字时就会触发,如果禁止鼠标选中,需要禁止该事件的默认行为
document.addEventListener('selectstart', function (e) {
e.preventDefault();
})
2、鼠标事件对象
鼠标事件对象:MouseEvent
是跟鼠标事件相关的一系列信息的集合,可以用来获取当前鼠标的位置信息
clientX | 鼠标指针位于浏览器页面当前窗口可视区的水平坐标(X轴坐标) |
clientY | 鼠标指针位于浏览器页面当前窗口可视区的垂直坐标(Y轴坐标) |
pageX | 鼠标指针位于文档的水平坐标(X轴坐标),IE 6~IE 8不兼容 |
pageY | 鼠标指针位于文档的水平坐标(X轴坐标),IE 6~IE 8不兼容 |
screenX | 鼠标指针位于屏幕的水平坐标(X轴坐标) |
screenY | 鼠标指针位于屏幕的垂直坐标(Y轴坐标) |
var pageX = event.pageX || event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft)
var pageY = event.pageY || event.clientY + (document.body.scrollTop || document.documentElement.scrollTop)
3、案例(图片随着鼠标移动)
<style>
img{
position: absolute;
top: 2px;
width: 150px;
height: 200px;
}
</style>
<body>
<img src="../imgs/凤霞.jpg" alt="">
<script>
//1、获取img对象
var pic = document.querySelector('img');
//2、给文档注册mousemove事件
document.addEventListener('mousemove',function(e){
//3、获取鼠标在页面中的坐标
var x = e.pageX;
var y = e.pageY;
//4、将鼠标的坐标设置给图片
pic.style.left = x-50+'px';
pic.style.top = y-50+'px';
})
</script>
</body>