javascript获取鼠标点击事件的位置

最新推荐文章于 2024-06-15 19:18:00 发布

weixin_34319374

最新推荐文章于 2024-06-15 19:18:00 发布

阅读量181

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/dingjunnan/blog/190107

本文介绍了一种在不同浏览器上获取鼠标点击位置的方法，通过监听document对象的点击事件并使用Event对象来兼容Firefox、Chrome、Safari、Opera及IE等浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

给ducument对象分配一个onclick事件处理程序，然后，该事件处理程序执行的时候，通过Event对象获取点击位置

document.onlick=processClick;

function processClick(evt){
    evt=evt||window.event;
    var x=0,y=0;
    
    //如果事件对象有pageX属性,对应firefox,opera,chrome,safari浏览器
    if(evt.pageX){
        x=evt.pageX;
        y=evt.pageY;
    }
    //如果对象有clientX属性,对应IE浏览器
    else if(evt.clientX){
        var offsetX=0,offsetY=0;
        //IE6及其以上版本
        if(document.documentElement.scrollLeft){
            offsetX=document.documentElement.scrollLeft;
            offsetY=document.documentElement.scrollTop;
        }
        //IE较旧的版本
        else if(document.body){
            offsetX=document.body.scrollLeft;
            offsetY=document.body.scrollTop;
        }
        x=evt.clientX+offsetX;
        y=evt.clientY+offsetY;
    }
    alert("you clicked at x="+x+" y="+y);
}

这个函数重点在解决跨浏览器差异，在IE8和较早版本中，可以通过window对象访问event对象，在其它浏览器中，默认地，将event对象作为事件处理程序的一个参数传递，这就是