如何捕获在 HTML 中调用的 onclick 事件？答案

【问题标题】：How do I capture the onclick event called in HTML?如何捕获在 HTML 中调用的 onclick 事件？
【发布时间】：2013-08-09 04:46:02
【问题描述】：

所以，我有一个<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 事件。我什至不确定这是否是在画布上获取坐标的正确方法，我只是希望此时我什至可以进入调试过程的那一部分。

感谢您的帮助！

【问题讨论】：

标签： javascript canvas coordinates

【解决方案1】：

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

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

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

【讨论】：

这也行不通...上下文中没有 relMouseCoords 的定义。

【解决方案2】：

您的代码中有几个错误，但您从链接帖子中获得的代码的原因是您忘记包含它使用的原型定义：

HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

现在您可以在画布元素上调用relMouseCoords：

/// event name in lower case
canvaselement.onclick = function () {
    var coords = canvaselement.relMouseCoords(event);
    //...

但是，您仍然会遇到问题，因为您不使用画布 context 进行绘图调用。

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

        /// get context like this
        ctx = canvaselement.getContext('2d'),
        img = new Image();

    img.onload = function () {

        /// use context to draw
        ctx.drawImage(img, 0, 0, 250, 250);

        //...

【讨论】：