目录，鼠标事件

1.鼠标事件的常用方法

(1)鼠标事件的常用方法

(2)没有右键菜单：contextmenu。

(3)无鼠标选择：选择开始。

2.鼠标事件对象

3.案例(图片随鼠标移动)

1.鼠标事件1。鼠标事件的常用方法(1)鼠标事件onclick的常用方法

单击鼠标左键时触发。

集中精神

获取鼠标指针焦点触发器

onblur

鼠标指针焦点丢失触发器

onmouseover

当鼠标指针经过时触发。

onmouseout

当鼠标指针离开时触发。

onmousedown

当按下任何鼠标按钮时触发。

onmouseup

释放任何鼠标按钮时触发。

onmousemove

当鼠标指针在元素中移动时连续触发。

(2)禁止使用鼠标右键菜单：上下文菜单document.addeventlistener('上下文菜单'，函数(e){ e . prevent default())；})主要控制上下文菜单什么时候应该显示，主要适用于程序员取消默认上下文菜单。

(3)无鼠标选择：当鼠标开始选择文本时，触发selectstart selectstart事件。如果禁止鼠标选择，则需要禁止该事件的默认行为。

文档。addevent listener(' select start '，function(e){ e . prevent default()；}) 2.鼠标事件对象鼠标事件对象：鼠标事件

是鼠标事件相关信息的集合，可以用来获取当前鼠标的位置信息。

clientX

鼠标指针位于浏览器页面当前窗口可见区域的水平坐标(x轴坐标)处。

客户

鼠标指针位于浏览器页面当前窗口可视区域的垂直坐标(Y轴坐标)处。

pageX

鼠标指针位于文档的横坐标(x轴坐标)上，IE 6~IE 8不兼容。

佩吉

鼠标指针位于文档的横坐标(x轴坐标)上，IE 6~IE 8不兼容。

screenX

鼠标指针位于屏幕的水平坐标(x轴坐标)上。

screenY

鼠标指针位于屏幕的纵坐标(Y轴坐标)上。

var pageX=事件。pageX | |事件。clientx(文档。身体。向左滚动| |文档。文档元素。向左滚动)var pageY=event。佩吉| |事件。clienty(document . body . scroll top | | document . document element . scroll top)3 .Case(图片随鼠标移动)style img { position:absolute；top:2px；宽度：150px高度：200px}/stylebodyimg src='。/imgs/fengxia . jpg ' alt=' script//1。获取img对象varpic=document . query selector(' img ')；//2.注册mousemove事件文档。AddEventListener ('mousemove '，函数(e) {//3。获取鼠标在页面中的坐标var x=e.pageXvar y=e.pageY//4。将鼠标坐标设置为pic . style . left=x-50 ' px '；图片。风格。top=y-50‘px’；})/脚本/正文