gpt4 book ai didi

javascript - HTML5 Multiple Canvases 事件监听器 - 如何确定哪个 Canvas 经历了事件?

转载 作者:行者123 更新时间:2023-11-29 22:24:18 26 4
gpt4 key购买 nike

我是 JS 新手。我没有使用 jQuery,我有一个问题。我在页面上创建了数量可变的 Canvas ,所有 Canvas 都有一个事件监听器,如下所示:

            for (i=0; i<numberOfCanvases; i++){
var canv = document.createElement("canvas");
canv.addEventListener('click', clickReporter, false);
document.body.appendChild(canv); }

给定监听函数clickReporter:

        function clickReporter(e){...}

我正在尝试使用此函数来告诉我单击事件相对于 Canvas 的鼠标位置:

function getMousePos(canvas, evt){
// get canvas position
var obj = canvas;
var top = 0;
var left = 0;
while (obj && obj.tagName != 'BODY') {
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
// return relative mouse position
var mouseX = evt.clientX - left + window.pageXOffset;
var mouseY = evt.clientY - top + window.pageYOffset;
return {
x: mouseX,
y: mouseY
};

这是我从本教程中找到的:http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

问题是,它假定只有一个 Canvas ,而我现在确实有一个放置在网页上的 Canvas 列表,但我想知道,如果只给出 clickReporter() 函数,是否有一种简单的方法确定选择了哪个 Canvas ?像 evt.getCanvas() 或 evt.getParentCanvas() 这样的函数?

我问是因为当一个事件发生时(鼠标点击许多 Canvas 之一,我想在那个位置只为那个 Canvas 创建 Action )

最佳答案

function clickReporter(e){
console.log( this ); // in a eventListener , this point to the element fire the event
console.log( e.target ); // in fireFox and webkit, e.target point to the element fire the event
}

关于javascript - HTML5 Multiple Canvases 事件监听器 - 如何确定哪个 Canvas 经历了事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10508357/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com