javascript - IE7 中未定义 event.pageX 和 event.pageY

Question

这是 a 标签内的 onclick 监听器

onclick="showMap('change-img-box',event); return false;"

这是jquery

function showMap(id,e){
var hpos = e.pageX, ypos = e.pageY; alert(hpos+'----'+ypos);
if($("#"+id).is(":visible")){
    $("#"+id).hide();
}else{
    $("#"+id).css({"top": ypos+10, "left": hpos+10}).hide().fadeIn(300);
}
}

不知道为什么，但是 IE 7 说 hpos 和 ypos 都是未定义的。我怎样才能解决这个问题。提前致谢。

Answer 1

旧版本的 IE 使用clientXandclientY代替。这是我用于跨浏览器兼容性的函数：

window.getMouseCoords = function(e) {
    if( !e) return {x:0,y:0};
    if( e.pageX || e.pageY) {
        return {x:e.pageX,y:e.pageY};
    }
    if( e.clientX || e.clientY) {
        return {
            x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
            y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop
        };
    }
    return {x:0,y:0};
};

Answer 2

由于您已经在使用 jquery，您可以使用 jquery 而不是内联 onclick 来初始化 click 事件。jQuery 根据 W3C 标准规范化事件对象（http://api.jquery.com/category/events/event-object/）

$('#thing-you-are-clicking').click( function(e) {
    var hpos = e.pageX, ypos = e.pageY;
    // Do your stuff here...
});

如果您需要“id”数据，可以使用 data-* 属性将其放入按钮的 dom 中，例如

<a href="#" id="thing-you-are-clicking" data-id="change-img-box">Hi</a>

然后您可以使用 .data('id') 访问数据

$('#thing-you-are-clicking').click( function(e) {
    var hpos = e.pageX, ypos = e.pageY;
    var id = $(this).data('id');
    // Do your stuff here...
});