javascript - 如何捕获在 HTML 中调用的 onclick 事件？

Question

所以，我有一个 <img>具有 onclick 的标签属性。 onclick调用一个名为 analyze(this) 的函数, 与 this成为形象。

analyze函数对图像做了一些不完全相关的事情，除了它把它绘制到 <canvas> 上。元素(使用 drawImage 函数)。

但是现在，我还想选择我刚刚在图像中单击的颜色。我目前正在使用这里回答的方法(有 70 多票的答案，不是选择的那个):How do I get the coordinates of a mouse click on a canvas element?

但是，我想我可能做错了。我绘制了图像并调用了我的函数(并且所有这些都有效)，但是没有调用颜色选择部分。我认为这是因为我没有真正捕捉到事件。这通常是我的代码的样子:

<img onclick="javascript:analyze(this);" />

---

function analyze(img_elem) {
    // This is getting the canvas from the page and the image in it
    var canvaselement = document.getElementById('canvas').getContext('2d'),
        img = new Image();

    img.onload = function () {
        canvaselement.drawImage(img, 0, 0, 250, 250);

        ...

        canvaselement.onClick = function () {
            var coords = canvaselement.relMouseCoords(event);
            pick(img, canvaselement, coords); // pass in coordinates            
        }

    }

    img.src = img_elem.src;
}

function relMouseCoords(event) {
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;

    do {
        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
    }
    while (currentElement = currentElement.offsetParent)

    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;

    return {
        x: canvasX,
        y: canvasY
    }
}

function pick(img, canvaselement, coords) {
    var pickedColor = "";
    canvaselement.drawImage(img, 0, 0, 250, 250);

    xx = coords.x;
    yy = coords.y;
    var imgData = canvas.getImageData(xx, yy, 1, 1).data;

    pickedColor = rgbToHex(imgData);

    //alert(pickedColor);
    return pickedColor;
}

因此，代码永远不会到达 pick功能。我有一种感觉，这是因为我没有真正捕捉到 onclick事件。我什至不确定这是否是在 Canvas 上获取坐标的正确方法，我只是有点希望此时我什至能进入调试过程的那一部分。

感谢您的帮助!

Answer 1

问题可能是您将 canvaselement 分配给 getContext('2d') 的结果，而不是分配给元素本身，您将需要单击事件绑定(bind)。创建两个变量，一个用于 DOM 元素本身，一个用于上下文，例如:

var canvaselement = document.getElementById('canvas'),
    canvaselementctx = canvaselement.getContext('2d');

...
canvaselement.onClick = function() {
    var coords = canvaselementctx.relMouseCoords(event);
    ...
}