点击事件的位置（Y）太高

我有一个画布元素，当我点击它时，我用e.clientX（Y）或e.screenX（Y）获得点击位置。奇怪的事情正在发生。 Y值总是太高。请看这张图片：http://img840.imageshack.us/img840/268/eventq.jpg。任何理想为什么这么高？点击事件的位置（Y）太高

来源

2010-12-02 thomas

是canvas元素在页面上的第一/顶部元素？屏幕截图不会让我们看到页面的顶部。 ClientY不是相对于当前元素，而是页面（视口）本身。 – Fosco 2010-12-02 14:24:40

不，有一些文字...有没有办法让它相对于画布元素？ – thomas 2010-12-02 14:29:24

我很确定你可以告诉发生了什么事。您没有相对于您的画布的坐标，但相对于您的视口。它也取决于你的浏览器是否包含填充。

将它们转换为正常坐标。在你的情况下，这涉及减去画布的偏移量。

来源

2010-12-02 14:23:01 buddhabrot

你只需要采取ClientX和Y并从他们减去画布的位置。

这个例子是不必要的冗长，只是为了显示步骤：

var canvas = document.getElementById('game'); 
var canvasX, canvasY; 

canvas.addEventListener('click', function(event) { 
    canvasX = canvas.offsetLeft; 
    canvasY = canvas.offsetTop; 
    var eventX = event.clientX; 
    var eventY = event.clientY; 
    var relX = eventX - canvasX; 
    var relY = eventY - canvasY; 
    alert('X = ' + relX + ', Y = ' + relY); 
});

工作样本：http://jsfiddle.net/JfhJF/

来源

2010-12-02 14:40:55 Fosco

点击事件的位置（Y）太高

回答

相关问题