Question

我试图在JavaScript中编写自己的按钮对象，可以放在HTML5画布上。我遇到的问题是将事件监听器添加到我的函数中。我的假设是我需要扩展一个实际上有addEventListener方法的对象，但我不确定如何在JavaScript中执行此操作。下面是我的一些代码片段。

function Button(bContext, ...) {
    var self = this;
    var context = bContext;
    ...


    self.addEventListener('mouseover', self.mouseOverListener, false);
    ...

    self.drawMe = function() {
    ...
    };

    self.mouseOverListener = function() {
        alert("Hovering");
    };
};

'...'只是我缩短了这篇文章的代码，实际上有更多的东西，但它与这个问题无关。

Answer 1

您可以轻松地将addEventListener方法添加到您的对象（无论如何，在大多数浏览器中，可能无法在IE < 8中使用）

self.addEventListener = document.body.addEventListener

但是，点击它时，它不会神奇地开始触发点击事件。您仍然必须通过监视<canvas>元素上的事件来自己生成这些内容。因此，只需滚动自己的事件监听器，或者从现有库中加入一个（见下文），而不是尝试从DOM继承，因此肯定更好，因为这可能会变得粗略。

您只想使用像raphael.js这样的<canvas>库，但赔率非常高。其中包含了所有这些内容，并使用类似DOM的事件来表达它自己的Element对象。也就是说，如果真的想要推出自己的解决方案，只要您只想捕获矩形区域内的点击事件（在曲线元素上找到点是另一回事），它就非常简单。

这是一些快速伪代码

var buttons = []; // stores all button instances
var canvas = document.getElementById('#myCanvas');
canvas.bind('mousemove',function(event){
  var i = buttons.length;
  while(i--){
    var box = { 
       x: [buttons[i].x, buttons[i].pos.x+buttons[i].width], 
       y: [buttons.y, buttons[i].pos.y+buttons[i].height]
    };
    if(event.clientX > box.x[0] && event.clientX < box.x[1] && event.clientY > box.y[0] && event.clientY < box.y[1]){
       buttons[i].click();
    }
  }
});

自定义对象和事件监听器

1 个答案: