鼠标事件,视口宽度、焦点事件、阻止默认行为

1.鼠标事件

//点击事件    onclick

//双击事件    ondblclick

//鼠标右键点击事件    oncontextmenu

//鼠标进入事件   

onmouseover        onmouseenter

//onmouseover 比 onmousenter 先执行

//鼠标离开事件

onmouseout        onmouseleave

//onmouseout 比 onmouseleava 先执行

注意:如果元素里面存在子元素,鼠标在元素中移动时,会反复触发onmouseover和onmouseout

//鼠标移动事件    onmousedown

//鼠标弹起事件    onmouseup


2.视口宽度

window.innerWidth返回视口宽度

window.innerHeight 返回视口高度

3.焦点事件

获得焦点事件  onfocus

失去焦点事件  onblur

4.阻止默认行为

e.preventDefault()

比如:阻止超链接跳转,阻止右键点击事件


案例

1)拖动框效果

dom.offsetLeft获取元素的默认左边距

dom.offsetTop获取元素的默认上边距

window.innerWidth  视口宽度

window.innerHeight 视口高度

dom.offsetWidth 获取元素可见高度(width+border+padding)

dom.offsetHeight获取元素可见高度(height+border+padding)

e.pageX鼠标指针到X轴坐标

.e.pageY鼠标指针到Y轴坐标

2)右键菜单

e.target获取具体的元素

e.preventDefault()阻止默认行为

3)选项卡

classList.remove()移除样式

classList.add()添加样式

小游戏,购物车,点击消失

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容