JavaScript鼠标移动事件以及实战案例
短信预约 -IT技能 免费直播动态提醒
一、鼠标点击事件
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 class="lazy" data-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鼠标移动事件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
