javascript - 无法使用 jquery 读取未定义的属性 'clientX'

Question

您好，我正在尝试学习如何使用 HTML5 canvas 制作绘图应用程序到目前为止我写了这段代码，问题是浏览器控制台一直告诉我无法读取未定义的属性“clientX”，我当然在使用 jquery

这是JS代码:

var canvas;
var context;


function getMousePos(e) {
    var canBoundX = canvas.offsetLeft;
    var canBoundY = canvas.offsetTop;
    var x = e.clientX - canBoundX,
        y = e.clientY - canBoundY;

    return {x: x, y: y};
}


function drag_click() {
    console.log(getMousePos());
}

function drag() {
    console.log(getMousePos());
}

function drag_stop() {
    console.log(getMousePos());
}

function draw() {
    canvas = $("#mainCanvas")[0];
    context = canvas.getContext('2d');
    context.strokeStyle =  "#000";
    context.lineWidth = 4;
    context.lineCap = "round";

    $(canvas).mousedown(function (e) {
        drag_click();
    });
    $(canvas).mousemove(function (e) {
        drag();
    });
    $(canvas).mouseup(function (e) {
        drag_stop();
    });
}


$(document).ready(draw()); 

Answer 1

您必须在函数 draw_click、draw 和 draw_stop 以及函数 中传递参数 e >get_mouse_pos。当您不传递任何参数时，函数 get_mouse_pos 中的变量 e 是 undefined。

var canvas;
var context;


function getMousePos(e) {
    var canBoundX = canvas.offsetLeft;
    var canBoundY = canvas.offsetTop;
    var x = e.clientX - canBoundX,
        y = e.clientY - canBoundY;

    return {x: x, y: y};
}


function drag_click(e) {
    console.log(getMousePos(e));
}

function drag(e) {
    console.log(getMousePos(e));
}

function drag_stop(e) {
    console.log(getMousePos(e));
}

function draw() {
    canvas = $("#mainCanvas")[0];
    context = canvas.getContext('2d');
    context.strokeStyle =  "#000";
    context.lineWidth = 4;
    context.lineCap = "round";

    $(canvas).mousedown(function (e) {
        drag_click(e);
    });
    $(canvas).mousemove(function (e) {
        drag(e);
    });
    $(canvas).mouseup(function (e) {
        drag_stop(e);
    });
}


$(document).ready(draw());