鼠标事件

2021-12-05 15:35:16 阅读：99 来源： 互联网

标签：function console log 鼠标事件浏览器属性 btns

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
</head>
<body>
<p>检测到您的电脑有2.4G的垃圾，点击立刻清理</p>
<button>清理缓存</button>
</body>
</html>
<script>
    //onclick,onmousedown,onmouseup,onmouseenter,onmouseout,onmouseleave;onmousemove,onmouseover,ondblclick,onmousewheel
    var btns=document.getElementsByTagName('button');
    btns[0].onclick=function () {
     console.log('click抬起');
    }
    btns[0].onmousedown=function () {
      console.log('按下');
    }
    btns[0].onmouseup=function () {
        console.log('抬起');
    }
    btns[0].onmousemove=function () {
        console.log('移动');
    }
    btns[0].onmouseenter=function () {
        console.log('进入');
    }
    btns[0].onmouseover=function () {
        console.log('进入2');
    }
    btns[0].onmouseleave=function () {
        console.log('离开');
    }
    btns[0].onmouseout=function () {
        console.log('离开2');
    }
    btns[0].onmousewheel=function () {
        console.log('滚轮');
    }
    btns[0].ondblclick=function () {
        console.log('doubleclick双击');
    }

</script>

首先，来看看 screenX 和 screenY 属性。这两个属性获得了所有浏览器的支持，应该说是最优选用属性，但是它们的坐标系时计算机屏幕，也就是说，以计算机屏幕左上角为定位原点。这对于以浏览器窗口为活动空间的网页来说没有任何价值。因为不同的屏幕分辨率，不同的浏览器窗口大小和位置，都使得在网页中定位鼠标成为一件很困难的事情。

其次，如果以 document 对象为坐标系，则可以考虑选用 pageX 和 pageY 属性实现在浏览器窗口中进行定位。这对于设计鼠标跟随来说是一个好主意，因为跟随元素一般都以绝对定位的方式在浏览器窗口中移动，在 mousemove 事件处理函数中把 pageX 和 pageY 属性值传递给跟绝对定位元素的 top 和 left样式属性即可。

IE 事件模型不支持上面的属性，为此还需寻求兼容 IE 的方法。而看 clientX 和 clientY 属性是以 window 对象为坐标系，且 IE 事件模型支持它们，可以选用它们。不过考虑 window 等对象可能出现的滚动条偏移量，所以还应加上相对于 window 对象的页面滚动的偏移量。

标签：function,console,log,鼠标,事件,浏览器,属性,btns
来源： https://www.cnblogs.com/dyq5211258/p/15645696.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

鼠标事件