帆布上附加的事件侦听器仅接收{'iStrusted＆quot'：true} obsecesandbox中的对象

发布于 2025-02-04 12:44:28 字数 358 浏览 2 评论 0原文

canvas.onmousedown = function (event) {
  console.log(JSON.stringify(event)); // this logs {"isTrusted":true} 
};

相同的宽度

canvas.addEventListener("mousedown",  function (event) {
  console.log(JSON.stringify(event)); // this logs {"isTrusted":true} 
});

，当我尝试仅记录event而无需解析时，应用程序崩溃了

原文

canvas.onmousedown = function (event) {
  console.log(JSON.stringify(event)); // this logs {"isTrusted":true} 
};

same width

canvas.addEventListener("mousedown",  function (event) {
  console.log(JSON.stringify(event)); // this logs {"isTrusted":true} 
});

and when I try to log just the eventwithout parsing it the app crashes

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

救星 2025-02-11 12:44:28

那个沙盒有很多代码，我将重点关注您在这里的内容...

鼠标事件对象很复杂，很可能json.stringify正在使用快捷方式；并更正，如果您尝试输出整个对象，它会很慢，或者可能像您描述的那样崩溃，但是那里还有其他属性，您可以在下面的示例上看到它。

var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d")
ctx.fillStyle = "red"

for (let i = 10; i < 100; i += 10 )
  ctx.rect(i, i, 50, 50);
ctx.stroke();

canvas.onmousedown = function (event) {
  console.log(JSON.stringify(event));
  console.log(event.x, event.y);
  
  ctx.beginPath()
  ctx.arc(event.x, event.y, 5, 0, 8)
  ctx.fill();
};

body { margin: 0 }

<canvas id="canvas"></canvas>

您可以在那里看到我正在使用event.x，event.y在用户单击时绘制圆圈。

您可以在官方文档中阅读有关可用属性的更多信息：
https：// https：// https：//deevervender.mozilla.org/en-us/文档/web/api/mouseevent＃属性

我想您的最终目标不只是输出：
console.log（json.stringify（event））
您还必须还有更多事情要做……

也许最好问一个新问题...
解释您在这些事件中要做什么，如果有的话，您会遇到什么错误。

That sandbox has a lot of code, I'm just going to focus on what you have here...

The mouse event object is complex and most likely JSON.stringify is taking a shortcut; and correct if you try to output the entire object it will be slow or it could crash like you describe, but there are other properties there, you can see it on the sample below.

var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d")
ctx.fillStyle = "red"

for (let i = 10; i < 100; i += 10 )
  ctx.rect(i, i, 50, 50);
ctx.stroke();

canvas.onmousedown = function (event) {
  console.log(JSON.stringify(event));
  console.log(event.x, event.y);
  
  ctx.beginPath()
  ctx.arc(event.x, event.y, 5, 0, 8)
  ctx.fill();
};

body { margin: 0 }

<canvas id="canvas"></canvas>

You can see there I'm using event.x, event.y to draw circles at the point the user clicked.

You can read more about the available properties on the official documentation:
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#properties

I imagine that your end goal is not to just output:
console.log(JSON.stringify(event))
there more must be something else you need those events to do...

Maybe best to ask a new question...
Explain there what are you trying to do in those events and what error are you getting if any.

回复收藏 0 原文

~没有更多了~