JavaScript-鼠标事件
2019-11-24 本文已影响0人
EndPein
鼠标事件比较多，比如常见的比如鼠标点击、移入、移出事件等
onclick 鼠标点击事件
一般主要是绑定的一个按钮上，当鼠标点击后，触发xxx操作。
<input id="btn1" type="button" value="这是一个弹窗提示" onclick="pop()" />
<script type="text/javascript">
function pop() {
alert('这是鼠标点击后的弹窗');
}
</script>
通过上面的代码，我们放到网页中，在点击后即可在点击了按钮后，触发弹窗提示。
onmousemove 鼠标移动进入区域后触发xxx操作
如果把上面的代码中的onclick改成onmousemove，鼠标只要移动到按钮上，不需要点击确定就会自动弹出
<input id="btn1" type="button" value="这是一个弹窗提示" onmousemove="pop()" />
onmouseset 鼠标从对应区域移出后触发的xxx操作
这个比较好理解，就不具体举例了。
在找个实战的东西来做一下练手
7天登陆勾选框项目
项目分解
1、有一个选项框,可以勾选按钮；
2、鼠标移动到选项框内的时候提示“为了您的账户安全，请不要在公共场合勾选”；
3、鼠标移出选项框须臾的时候，则去掉提示
根据上面说的那么大致思路如下
创建一个div区域，里面有这一段话，然后动过设置display样式为none&block来控制他的显示和隐藏；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠标小示例</title>
<style>
#msg {
width: 200px;
height: 100;
background: red;
border: 1px solid #999;
display: none;
}
</style>
</head>
<body>
<input type="checkbox" onmousemove="showMsg()" onmouseout="hideMsg()" />
<div id="msg">
<p>为了您的账户安全，请不要在公共场合勾选</p>
</div>
<script type="text/javascript">
function showMsg () {
var msg = document.getElementById('msg') ;
msg.style.display = 'block';
} ;
function hideMsg() {
var msg = document.getElementById('msg') ;
msg.style.display = 'none';
}
</script>
</body>
</html>
