Event事件-2:mouseover、mouseout、mouseenter、mouseleave鼠标移入移出 / clientX鼠标位置 / pageX页面位置 / mousemove鼠标移...

mouseover、mouseout 鼠标移入移出

        如果鼠标移入或者移出 子元素 范围,mouseover 和 mouseout  会触发

Event事件-2:mouseover、mouseout、mouseenter、mouseleave鼠标移入移出 / clientX鼠标位置 / pageX页面位置 / mousemove鼠标移..._第1张图片

mouseenter、mouseleave 鼠标移入移出

        标移入或者移出,不受 子级元素范围干扰

Event事件-2:mouseover、mouseout、mouseenter、mouseleave鼠标移入移出 / clientX鼠标位置 / pageX页面位置 / mousemove鼠标移..._第2张图片

clientX、clientY 鼠标位置

获取鼠标点击的位置(相对于显示区域可视区的位置)

        e.clientX  X轴

        e.clientY  Y轴

Event事件-2:mouseover、mouseout、mouseenter、mouseleave鼠标移入移出 / clientX鼠标位置 / pageX页面位置 / mousemove鼠标移..._第3张图片

pageX、pageY 页面位置

获取鼠标点击的位置(相对于页面左上角位置)

        // e.pageX X轴

        // e.pageY Y轴

Event事件-2:mouseover、mouseout、mouseenter、mouseleave鼠标移入移出 / clientX鼠标位置 / pageX页面位置 / mousemove鼠标移..._第4张图片

鼠标跟随案例

Event事件-2:mouseover、mouseout、mouseenter、mouseleave鼠标移入移出 / clientX鼠标位置 / pageX页面位置 / mousemove鼠标移..._第5张图片

contextmenu 鼠标右键

Event事件-2:mouseover、mouseout、mouseenter、mouseleave鼠标移入移出 / clientX鼠标位置 / pageX页面位置 / mousemove鼠标移..._第6张图片

自定义一个右键菜单

Event事件-2:mouseover、mouseout、mouseenter、mouseleave鼠标移入移出 / clientX鼠标位置 / pageX页面位置 / mousemove鼠标移..._第7张图片

on添加事件方法下另一种阻止默认行为return false

Event事件-2:mouseover、mouseout、mouseenter、mouseleave鼠标移入移出 / clientX鼠标位置 / pageX页面位置 / mousemove鼠标移..._第8张图片

你可能感兴趣的:(Event事件-2:mouseover、mouseout、mouseenter、mouseleave鼠标移入移出 / clientX鼠标位置 / pageX页面位置 / mousemove鼠标移...)