【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二十三)

495

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动, 本文已参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金。

感激相遇 你好 我是阿ken

作者:请叫我阿ken
链接:juejin.cn/user/109118…
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

🌊🌈关于前言:

文章部分内容及图片出自网络,如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容:

下述内容所属本专栏系列-第七部分 DOM下

7.8_鼠标事件

7.8.1_鼠标事件的常用方法

鼠标是计算机的一种输入设备, 也是计算机显示系统纵横坐标定位的指示器,所以鼠标事件是 Web 开发中最常用的一类事件。例如,鼠标指针滑过时,切换 Tab 栏显示的内容;利用鼠标拖电状态框,调整显示位置等,这些常见的网页效果都会用到鼠标事件。

鼠标事件:

事件名称事件触发时机
onclick单击鼠标左键时触发
onfocus获得鼠标指针焦点触发
onblur失去鼠标指针焦点触发
onmouseover鼠标指针经过时触发
onmouseout鼠标指针离开时触发
onmousedown当按下任意鼠标按键时触发
omouseup当释放任意鼠标按键时触发
onmousemove在元素内当鼠标指针移动时持续触发

上表中列举的这此鼠标事件的使用都非常简单,读者可以自行尝试使用。
在项目开发中,有时还会用到 contextmenu 和 selectstart 这两个事件,接下来我们将分别进行详解。

1. 禁止鼠标右击菜单 ( contextmenu )

contextmenu 主要控制应该何时显示上下文菜单,主要应用于程序员取消默认的上下文菜单,示例代码如下。

document.addEventListener ('contextmenu', function (e) {
e.preventDefault();
});

2. 禁止鼠标选中 ( selectstart 事件 )

selectstart 事件是鼠标开始选择文字时就会触发,如果禁止鼠标选中,需要禁止该事件的默认行为,示例代码如下。

document.addEventListener ('selectstart', function (e) {
e.preventDefault();
});

7.8.2_鼠标事件对象

之前我们学习了 event 事件对象,它代表事件的状态,是跟事件相关的一系列信息的集合,现阶段主要使用的是鼠标事件对象 MouseEvent。

在项目开发中还经常涉及一些常用的鼠标属性,用来获取当前鼠标指针的位置信息。

鼠标事件位置属性:

位置属性(只读)描述
clientX鼠标指针位于浏览器页面当前窗口可视区的水平坐标 ( X轴坐标 )
clientY鼠标指针位于浏览器页面当前窗口可视区的垂直坐标 ( Y轴坐标 )
pageX鼠标指针位于文档的水平坐标(X轴坐标),IE6 ~ IE8 不兼容
pageY鼠标指针位于文档的垂直坐标(Y轴坐标),IE6 ~ IE8 不兼容
screenX鼠标指针位于屏幕的水平坐标(X轴坐标)
screenY鼠标指针位于屏幕的垂直坐标(Y轴坐标)

从上表可知,IE6 ~ IE8 浏览器中不兼容 pageX 和 pageY 属性。因此,项目开发时需要对 IE6 ~ IE8 浏览器进行兼容处理,具体示例如下。

var pageX = event.pageX || event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
var pageY = event.pageY || event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);

从以上代码可知,鼠标指针在文档中的坐标等于鼠标指针在当前窗口中的坐标加上滚动条卷去的文本长度,需要用到 doeument.body 或者 document.documentElement 下的 srollLeft 和 scrollTop 属性。

7.8.3_[ 案例 ] 图片跟随鼠标指针移动

本案例将在不考虑兼容性的情况下,简单实现图片跟随鼠标指针移动的效果。在这里需要使用鼠标移动事件 mousemove ,每次鼠标移动,都会获得最新的鼠标指针坐标,把这个 x 和 y 坐标作为图片的 top 和 left 值就可以实现图片的移动。

案例:示例代码如下。

<style>
img {
position: absolute;
top: 2px;
}
</style>
<body>
<img src="images/angel.gif" alt="">
<script>
var pic = document.querySelector ('img');
document.addEventListener ('mousemove', function(e) {
var x = e.pageX;
var y = e.pageY;
pic.style.left = x - 50 + 'px';
pic.style.top = y - 40 + 'px';
});
</script>
</body>

上述代码中,第 1 ~ 6 行代码给 img 图片设置定位,因为图片要移动,不占位置,所以这里使用绝对定位即可。第 11 行由于图片是在页面中移动,所以要为 document 添加 mousemove 事件,在事件处理程序中,获取鼠标的 X、Y 坐标,然后把 X、Y 坐标作为图片的 top 和 left 值。需要注意的是,要给 left 和 top 属性添加 px 单位。

🌊🌈往期回顾:

HTML入门指南学习专栏「已完结」:

阿ken的HTML、CSS的入门指南(一)_HTML基础
阿ken的HTML、CSS的入门指南(二)_HTML页面元素和属性
阿ken的HTML、CSS的入门指南(三)_文本样式属性
阿ken的HTML、CSS的入门指南(四)_CSS3选择器
阿ken的HTML、CSS的入门指南(五)_CSS盒子模型
阿ken的HTML、CSS的入门指南(六)_CSS盒子模型
阿ken的HTML、CSS的入门指南(七)_CSS盒子模型
阿ken的HTML、CSS的入门指南(八)_CSS盒子模型
阿ken的HTML、CSS的入门指南(九)_浮动与定位
阿ken的HTML、CSS的入门指南(十)_浮动与定位
阿ken的HTML、CSS的入门指南(十一)_浮动与定位
阿ken的HTML、CSS的入门指南(十二)_表单的应用
阿ken的HTML、CSS的入门指南(十三)_表单的应用
阿ken的HTML、CSS的入门指南(十四)_表单的应用
阿ken的HTML、CSS的入门指南(十五)_表单的应用
阿ken的HTML、CSS的入门指南(十六)_多媒体技术
阿ken的HTML、CSS的入门指南(十七)_多媒体技术
挑战最短时间带你走进HTML(十八)
挑战最短时间带你走进HTML(十九)
挑战最短时间带你走进HTML(二十)


 Javascript入门指南学习专栏「更新中」:

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(一)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(三)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(四)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(五)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(六)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(七)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(八)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(九)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十一)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十二)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十三)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十四)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十五)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十六)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十七)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十八)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(十九)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二十)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二十一)
【JS干货分享 | 建议收藏】挑战最短时间带你走进JS(二十二)

🌊🌈关于后记:

感激相遇 你好 我是阿ken
个人微信:wlpchaojibang 有问题请随时与我交流,一个人可以走的很快,但一群人才可以走的更远!

「关注」:提高学习效率!

👍🏻:原创不易,适当鼓励!

⭐:收藏文章,温故知新!

💬:评论交流,共同进步!