事件处理程序无响应

时间:2018-11-20 21:19:08

标签: javascript d3.js events

我从JavaScript和D3开始,尝试编写一个简单的代码,使用户可以在画布上绘制曲线。第一步是能够检测到何时按下鼠标按钮,以便如果在按下按钮时移动了鼠标,就会记录数据。

我尝试将“ .on”更改为“ .addEventListener”,结果相同。另外,我正在使用Firefox。

在阅读下面的代码时,我知道每次移动鼠标时都将clickState标志增加是没有意义的。我这样做只是为了调试,以查看是否在鼠标移动时调用了mousemovefx函数。

当我打开此网页时,输出div中的文本立即变为“向下”,而我所做的任何操作(例如单击并在画布中移动)都不会对其进行更改。其他功能似乎也没有执行。

我既不理解(a)为什么未在这些事件上调用处理程序,又不理解(b)为什么不立即单击但鼠标甚至不在画布上时立即调用mousedown处理程序

    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;
    }

1 个答案:

答案 0 :(得分:1)

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>

设置侦听器时,您将调用函数更改:

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);

这将传递该函数,然后在单击按钮时调用该函数。