JavaScript鼠标移动事件以及实战案例
更新时间：2023年05月08日 11:44:39 作者：爱吃汉堡的代码人
在学习JS中我对鼠标移动事件进行了一些总结,需要的可以作参考,下面这篇文章主要给大家介绍了关于JavaScript鼠标移动事件以及实战案例的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
一、鼠标点击事件
1.onclick单击事件
鼠标单击时事件处理函数
<input type="button" id="bt" value="点击">
<script>
//找到按钮并设置点击事件
document.getElementById("bt").onclick = function (){
//被点击后弹出弹出框
alert("按钮被点击")
}
</script>2.ondblclick双击事件
鼠标双击时事件处理函数
<input type="button" id="bt" value="点击">
<script>
//找到按钮并设置双击击事件
document.getElementById("bt").ondblclick = function (){
//被点击两次后弹出弹出框
alert("按钮被点击")
}
</script>3. onmousedown鼠标按下事件
当鼠标被按下后事件处理函数
4. onmouseup鼠标松开事件
当鼠标被松开后事件处理函数
案例:
二、鼠标移动事件
1.onmouseover移入事件
鼠标移动都某个指点的HTML标签上时触发的事件
2.onmouseout移出事件
鼠标从HTML标签上移开时触发的事件
3.onmousemove移动事件
鼠标指针在该元素的上面移动就触发
4.mouseenter移入事件
于onmouseover相同但mouseenter事件只执行一次
5.mouseleave移出事件
于onmouseout相同但mouseenter事件只执行一次
三、案列：
效果图如下:
完整代码如下：
<html>
<head>
<meta charset="utf-8">
<title>鼠标跟随</title>
<style type="text/css">
div{
position: relative;
width: 360px;
height: 511px;
}
img{
width: 360px;
border-radius: 5px;/* 设置圆角 */
}
p{
width: 100px;
height: 30px;
position: absolute;/* 绝对定位 */
left: 0;
top: 0;
background-color: rgba(0,0,0,0.666);
color: white;
padding: 10px;
display: none;/* 隐藏 */
pointer-events: none;/* 不对鼠标事件作出反应 */
}
</style>
</head>
<body>
<div id="div_1">
<img src="img/1.jpg" alt="">
<p>
<strong>简介</strong>
<span>买建材上京东！京东</span>
</p>
</div>
<script type="text/javascript">
//获取div标签
var div_1 = document.getElementById("div_1");
//给div_1绑定事件:onmouseover:鼠标移入事件
div_1.onmouseover = function(){
//将p标签显示出来，故需要将display的值设置为block
document.querySelector("p").style.display = "block";
}
//onmouseout:鼠标从元素上移开时触发的事件
div_1.onmouseout = function(){
将p标签显示出来，故需要将display的值设置为none
document.querySelector("p").style.display = "none";
}
//onmousemove:鼠标从元素上移动时触发的事件
div_1.onmousemove = function(){
document.querySelector("p").style.left =event.offsetX + "px";
document.querySelector("p").style.top =event.offsetY + "px";
}
</script>
</body>
</html>总结
到此这篇关于JavaScript鼠标移动事件以及实战案例的文章就介绍到这了,更多相关JS鼠标移动事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了JavaScript对象拷贝与赋值操作,结合实例形式分析了javascript对象定义、拷贝、赋值等相关操作技巧与注意事项,需要的朋友可以参考下2018-12-12
reduce函数，是ECMAScript5规范中出现的数组方法.下面通过本文给大家分享Javascript面试经典套路reduce函数查重，需要的朋友参考下吧2017-03-03
基于Bootstrap table组件实现多层表头的实例代码
Bootstrap table还有一个很多强大的功能，下面就通过本文给大家分享基于Bootstrap table组件实现多层表头的实例代码，需要的朋友参考下吧2017-09-09
Javascript 数组添加 shuffle 方法的实现代码
PHP 里面有个非常方便的打乱数组的函数 shuffle() ，这个功能在许多情况下都会用到，但 javascript 的数组却没有这个方法，没有不要紧，可以扩展一个，自己动手，丰衣足食嘛。2009-09-09
这篇文章主要为大家详细介绍了JS实现拖拽元素时与另一元素碰撞检测，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了微信小程序的开发范式BeautyWe.js详解，它是一套专注于微信小程序的企业级开发范式，它的愿景是：让企业级的微信小程序项目中的代码，更加简单、漂亮,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了JavaScript生成指定范围随机数和随机序列,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-05-05
EventSource是HTML5中的一种新的API,用来实现服务器端向客户端推送事件,相比于常规的轮询方式,EventSource可以实现更加高效、低延迟的数据传输,这篇文章主要介绍了解决EventSource 删除单词的前置空格问题记录,需要的朋友可以参考下2024-03-03
webpack自动化打包webpack-dev-server的实现
我们每次改完要打包的资源文件，和配置文件都是是输入npx webpack命令手动打包的，本文就来介绍一下webpack自动化打包webpack-dev-server的实现，具有一定的参考价值，感兴趣的可以了解一下2023-07-07
这篇文章主要介绍了微信小程序调用微信支付接口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论