Обработчики событий не отвечают

Question

Я начинаю с JavaScript и D3 и пытаюсь написать простой код, который позволяет пользователям рисовать кривые на холсте.Первым шагом является возможность определить, когда кнопка мыши нажата, поэтому, если мышь перемещалась, а кнопка была нажата, данные были бы записаны.

Я попытался изменить «.on» на «.addEventListener»с такими же результатами.Кроме того, я использую Firefox.

Когда я читаю код ниже, я знаю, что не имеет смысла увеличивать флаг clickState при каждом перемещении мыши;Я сделал это только в целях отладки, чтобы увидеть, вызывается ли функция mousemovefx при движении мыши.

Когда я открываю эту веб-страницу, текст в выходном элементе div немедленно изменяется на «Вниз», и я ничего не делаю (например,щелчок и перемещение в холсте) меняет его.Кажется, что ни одна из других функций не выполняется.

Я также не понимаю (а) почему обработчики не вызываются для этих событий, или (б) почему обработчик 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;
    }

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

Это передаст функцию, которая будет вызываться при нажатии кнопки.