Question

我需要根据这些数据设置div的顶部和左侧px数字。怎么可能这样做呢？

所以基本上当用户点击这个元素时。我有一个显示/隐藏内容的showcontent功能。但我需要通过找到光标的位置来设置顶部

function ShowContent(d) {  
    document.getElementById(d).style.display = "block";  
}

Answer 1

此示例基于jQuery javascript库。

$("#button").click(function(e){
        alert("X is: "+e.pageX+" \n Y is:"+e.pageY);
});

在线演示：http://jsfiddle.net/pGdbD/1/

尝试点击按钮的不同部分

Answer 2

您可以使用Event对象的event.pageX和event.pageY属性来查找事件发生时鼠标的位置。例如：

document.getElementById('yourDiv').addEventListener('click', function(event) {
    console.log('X: ' + event.pageX + ' Y: ' + event.pageY);
});

显然，您的实际代码会更复杂，例如，对于IE使用attachEvent，但这应该会告诉您它是如何完成的。

编辑正如Juan非常正确地提醒我的那样，pageX/Y未在Internet Explorer中设置。以下内容改编自jQuery源代码，并解决了这个问题：

function(event) {
    var x, y;

    if ( event.pageX == null && event.clientX != null ) {
        var doc = document.documentElement,
            body = document.body;

        x = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
        y = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
    } else {
        x = event.pageX;
        y = event.pageY;
    }

    console.log('X: ' + x + ' Y: ' + y);
}

Answer 3

如果您不使用jquery或其他lib，则需要查看此页面http://www.quirksmode.org/js/events_properties.html以跨浏览器处理它。它涉及以下属性：Event.clientX或Event.pageX

否则jquery的事件有一个pageX和pageY属性。

大多数图书馆都可以为你做这件事。

Ext-Core：Event.getPageX（）http://dev.sencha.com/deploy/dev/docs/source/EventManager.html#method-Ext.EventObject-getPageX

jquery：http://api.jquery.com/event.pageX/

当用户点击Javascript中的按钮时，如何找出鼠标光标的确切位置？

3 个答案: