blur事件
JavaScript⿏标事件及案例⽬录
⼀、⿏标事件
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轴坐标）
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';
p = y-50+'px';
})
</script>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。