争怎路由网/网站教程/内容

JavaScript如何取得鼠标点击的位置？取得的3种方法总结

网站教程2024-05-13 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
其实我们一直都在dom中和元素打交道，这也是手机交互的一个比较常用的方面，但是很多程序员比较失望，在不同的浏览器中，会出现不同的结果，下面我们就来讲一下利用js如何获取鼠标点击的位置，并且为您总结详细的教程。

微信截图_20181029134039.png

一：鼠标相对于屏幕

如果我们涉及在鼠标点击的位置，比较简单的话，我们就可以获取鼠标点击之后，利用screenX，screenY来确定点击的大致位置，从而判断出与屏幕的上边距和下边距的相对位置，我们不要考虑iframe等一些因素，但是在不同的浏览器中，表现还是很相同的。

例：

function getMousePos(event) {             
     var e = event (专业提供视频软件下载)

 
   (专业提供视频软件下载)

 
    window.event;             
      return {'x':e.screenX,'y':screenY}  
}

二：鼠标相对于浏览器的窗口

如果通过以上简单的代码来确定位置，往往这些都还不够，因为在大致的情况下，我们需要得到鼠标相对于浏览器窗口的坐标，分别获取到鼠标现对于窗口的的上边距和左边距，可以利用clientX，clientY表示。

例如：

function getMousePos(event) {              
     var e = event (专业提供视频软件下载)

 
   (专业提供视频软件下载)

 
    window.event;              
     return {'x':e.clientX,'y':clientY} 
}

三：鼠标相对于文档

我们可以利用clientX与clientY来得到当前浏览器窗口的坐标，但是这些条件都是由限制的，当我如出现在页面的滚动的情况下，那么相对于文档的坐标怎么办呢，这时候我们只要加上滚动的位移就可以了。

例如：

function getMousePos(event) {
    var e = event (专业提供视频软件下载)

 
   (专业提供视频软件下载)

 
    window.event;
    var scrollX = document.documentElement.scrollLeft (专业提供视频软件下载)

 
   (专业提供视频软件下载)

 
    document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop (专业提供视频软件下载)

 
   (专业提供视频软件下载)

 
    document.body.scrollTop;
    var x = e.pageX (专业提供视频软件下载)

 
   (专业提供视频软件下载)

 
    e.clientX + scrollX;
    var y = e.pageY (专业提供视频软件下载)

 
   (专业提供视频软件下载)

 
    e.clientY + scrollY;
    //alert('x: ' + x + '\ny: ' + y);
    return { 'x': x, 'y': y };
}
目前火狐浏览器的问题会简单的多，因为火狐支持pageX,与pageY这两个属性，已经把页面滚动计算在内了。
以上就是对JavaScript如何获取鼠标点击的位置？获取的三种方法汇总的全部介绍，如果你想了解更多有关JavaScript视频教程，请关注php中文网。
以上就是JavaScript如何获取鼠标点击的位置？获取的三种方法汇总的详细内容，更多请关注php中文网其它相关文章！
				
				

					
  • 微信
    • 
					
    • 
				

    网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



          
    ……
    标签:JavaScript如何取得鼠标点击的位置？取得的3种办法总结
     
    相关阅读