事件处理程序无响应 [英] Event handlers not responding
问题描述
我从JavaScript和D3开始,尝试编写一个简单的代码,使用户可以在画布上绘制曲线.第一步是能够检测到鼠标按钮何时按下,以便在按钮按下时移动鼠标,就可以记录数据.
I'm beginning with JavaScript and D3 and trying to write a simple code that allows users to draw a curve on a canvas. The first step is being able to detect when a mouse button is down, so that if the mouse moved while the button was down, data would be recorded.
我尝试将".on"更改为".addEventListener",结果相同.另外,我正在使用Firefox.
I tried changing ".on" to ".addEventListener" with the same results. Also, I'm using Firefox.
当阅读下面的代码时,我知道每次移动鼠标时都将clickState标志增加是没有意义的.我这样做只是为了调试,以查看是否在鼠标移动时调用了mousemovefx函数.
When reading the code below, I know it makes little sense to have the flag clickState incremented every time the mouse is moved; I only did that for debugging purposes to see if the function mousemovefx was being called upon mouse motion.
当我打开此网页时,输出div中的文本立即变为向下",而我所做的任何操作(例如单击并在画布中移动)都不会对其进行更改.其他功能似乎也没有执行.
When I open this webpage, the text in the output div changes immediately to "Down" and nothing I do (e.g. clicking and moving in the canvas) changes it. None of the other functions seem to be executed either.
我既不理解(a)为什么未在这些事件上调用处理程序,又不理解(b)为什么不立即单击而鼠标甚至不在画布上时立即调用mousedown处理程序
I neither understand (a) why the handlers aren't being called on those events nor (b) why the mousedown handler is being called immediately, when not only am I not clicking but my mouse isn't even on the canvas.
document.body.style.backgroundColor = "black";
canvw = 500;
canvh = 500;
border = 6;
clickState = 0;
var canvas = d3.select("body")
.append("svg") //Add an SVG to the body
.attr("width",canvw+2*border)
.attr("height",canvh+2*border)
var canvbg = canvas.append("rect")
.attr("x",border)
.attr("y",border)
.attr("width",canvw)
.attr("height",canvh)
.attr("fill","white")
.attr("stroke","rgb(200,200,200)")
.attr("stroke-width",5)
var mydiv = d3.select("body")
.append("div")
.attr("id","outputdiv")
.style("color","orange")
canvas.on("mousedown", mousedownfx());
canvas.on("mouseup", mouseupfx());
canvas.on("mousemove",mousemovefx());
canvas.on("mouseout",mouseoutfx());
function mousedownfx() {
clickState = 1;
mydiv.text("Down")
}
function mouseupfx() {
clickState = 0;
mydiv.text("Up")
}
function mousemovefx() {
mydiv.text(clickState)
clickState = clickState + 1;
}
function mouseoutfx() {
clickstate = 0;
}
推荐答案
document.body.style.backgroundColor = "black";
canvw = 500;
canvh = 500;
border = 6;
clickState = 0;
var canvas = d3.select("body")
.append("svg") //Add an SVG to the body
.attr("width",canvw+2*border)
.attr("height",canvh+2*border)
var canvbg = canvas.append("rect")
.attr("x",border)
.attr("y",border)
.attr("width",canvw)
.attr("height",canvh)
.attr("fill","white")
.attr("stroke","rgb(200,200,200)")
.attr("stroke-width",5)
var mydiv = d3.select("body")
.append("div")
.attr("id","outputdiv")
.style("color","orange")
canvas.on("mousedown", mousedownfx);
canvas.on("mouseup", mouseupfx);
canvas.on("mousemove",mousemovefx);
canvas.on("mouseout",mouseoutfx);
function mousedownfx() {
clickState = 1;
mydiv.text("Down")
}
function mouseupfx() {
clickState = 0;
mydiv.text("Up")
}
function mousemovefx() {
mydiv.text(clickState)
clickState = clickState + 1;
}
function mouseoutfx() {
clickstate = 0;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
设置侦听器时,您将调用函数更改:
When you are setting the listeners you are calling the function change:
canvas.on("mousedown", mousedownfx());
canvas.on("mouseup", mouseupfx());
canvas.on("mousemove",mousemovefx());
canvas.on("mouseout",mouseoutfx());
收件人:
canvas.on("mousedown", mousedownfx);
canvas.on("mouseup", mouseupfx);
canvas.on("mousemove",mousemovefx);
canvas.on("mouseout",mouseoutfx);
这将传递该函数,然后在单击按钮时调用该函数.
This will pass the function, which will then be called when the button is clicked.
这篇关于事件处理程序无响应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!