鼠标点击事件
- onclick单击事件
鼠标单击时事件处理函数
<input type="button" id="bt" value="点击">
<script>
//找到按钮并设置点击事件document.getElementById("bt").onclick = function (){//被点击后弹出弹出框alert("按钮被点击")}</script>- ondblclick双击事件
鼠标双击时事件处理函数
<input type="button" id="bt" value="点击">
<script>
//找到按钮并设置双击击事件document.getElementById("bt").ondblclick = function (){//被点击两次后弹出弹出框alert("按钮被点击")}</script- onmousedown鼠标按下事件
当鼠标被按下后事件处理函数
- onmouseup鼠标松开事件
当鼠标被松开后事件处理函数
按下事件和松开事件结合案例
<input type="button" id="bt" value="点击">
<script>
//找到按钮var bt = document.getElementById("bt");
//设置按钮被按下事件bt.onmousedown = function (){
//按钮的value值改变bt.value = "被按下"}//设置按钮被松开事件bt. onmouseup= function (){
//按钮的value值改变bt.value = "被松开"}</script> 
鼠标移动事件
- onmouseover移入事件
鼠标移动都某个指点的HTML标签上时触发的事件
- onmouseout移出事件
鼠标从HTML标签上移开时触发的事件
- onmousemove移动事件
鼠标指针在该元素的上面移动就触发
- mouseenter移入事件
于onmouseover相同但mouseenter事件只执行一次
- mouseleave移出事件
于onmouseout相同但mouseenter事件只执行一次
获取鼠标位置
| clientX | 以浏览器窗口左上顶角为原点，定位 x 轴坐标 |
| clientY | 以浏览器窗口左上顶角为原点，定位 y 轴坐标 |
| offsetX | 以当前事件的目标对象左上顶角为原点，定位 x 轴坐标 |
| offsetY | 以当前事件的目标对象左上顶角为原点，定位 y 轴坐标 |
| pageX | 以 document 对象（即文档窗口）左上顶角为原点，定位 x 轴坐标 |
| pageY | 以 document 对象（即文档窗口）左上顶角为原点，定位 y 轴坐标 |
| screenX | 计算机屏幕左上顶角为原点，定位 x 轴坐标 |
| screenY | 计算机屏幕左上顶角为原点，定位 y 轴坐标 |
鼠标事件案例：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>鼠标跟随</title><style>div{position: relative;margin: auto;width: 360px;height: 511px;}img{border-radius: 5px;/*设置圆角*/}p{width: 500px;height: 300px;position: absolute;/*绝对定位*/left: 0;top: 0;background-color: rgba(0, 0, 0, 0.709);color: white;padding: 10px;display: none;/*隐藏*/pointer-events: none;/*不对鼠标事件作出反应*/}</style></head><body><div id="div_1"><img src="../img/mhl.jpg" alt=""><p><strong>简介</strong><br><span>在钱塘开茶铺的赵盼儿惊闻未婚夫、新科探花欧阳旭要另娶当朝高官之女，不甘命运的她誓要上京讨个公道。在途中她遇到了出自权门但生性正直的皇城司指挥顾千帆，并卷入江南一场大案，两人不打不相识从而结缘。赵盼儿凭借智慧解救了被骗婚而惨遭虐待的“江南第一琵琶高手”宋引章与被苛刻家人逼得离家出走的豪爽厨娘孙三娘，三位姐妹从此结伴同行，终抵东京见识世间繁华。为了不被另攀高枝的欧阳旭从京城赶走，赵盼儿与宋引章、孙三娘一起历经艰辛，将小小茶坊一步步发展最大的酒楼，揭露了负心人的真面目，收获了各自的真挚感情和人生感悟，也为无数平凡女子推开了一扇平等救赎之门。</span></p></div><script>//获取div标签var div_1=document.getElementById("div_1")//给div_1绑定事件：onmouseover：鼠标移入的事件div_1.onmouseover=function(){//将p标签显示出来,故需要将display的值设置为blockdocument.querySelector("p").style.display="block"}//onmouseout:鼠标从元素上移开时触发的事件div_1.onmouseout=function(){//将p标签隐藏,故需要将display的值设置为nonedocument.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>
