Canvas 内部元素添加事件处理

目录

• 前言
• 自定义事件
• 有序数组
• 元素父类
• 事件判断
• 其他
  • 立即执行函数
  • apply, call, bind
  • addEventListener 传参
  • 调用父类的构造函数
  • 对象检测
  • isPointInPath

 

前言

canvas 没有提供为其内部元素添加事件监听的方法，因此如果要使 canvas 内的元素能够响应事件，需要自己动手实现。实现方法也很简单，首先获得鼠标在 canvas 上的坐标，计算当前坐标在哪些元素内部，然后对元素进行相应的操作。配合自定义事件，我们就可以实现为 canvas 内的元素添加事件监听的效果。

源码    演示

自定义事件

为了实现javascript对象的自定义事件，我们可以创建一个管理事件的对象，该对象中包含一个内部对象（当作map使用，事件名作为属性名，事件处理函数作为属性值，因为可能有个多个事件处理函数，所以使用数组存储事件处理函数），存储相关的事件。然后提供一个激发事件的函数，通过使用 call 方法来调用之前绑定的函数。下面是代码示例：

(function () { cce.EventTarget = function () { this._listeners = {}; this.inBounds = false; }; cce.EventTarget.prototype = { constructor: cce.EventTarget, // 查看某个事件是否有监听 hasListener: function (type) { if (this._listeners.hasOwnProperty(type)) { return true; } else { return false; } }, // 为事件添加监听函数 addListener: function (type, listener) { if (!this._listeners.hasOwnProperty(type)) { this._listeners[type] = []; } this._listeners[type].push(listener); cce.EventManager.addTarget(type, this); }, // 触发事件 fire: function (type, event) { if (event == null || event.type == null) { return; } if (this._listeners[event.type] instanceof Array) { var listeners = this._listeners[event.type]; for (var i = 0, len = listeners.length; i < len; i++) { listeners[i].call(this, event); } } }, // 如果listener 为null，则清除当前事件下的全部事件监听 removeListener: function (type, listener) { if (listener == null) { if (this._listeners.hasOwnProperty(type)) { this._listeners[type] = []; cce.EventManager.removeTarget(type, this); } } if (this._listeners[type] instanceof Array) { var listeners = this._listeners[type]; for (var i = 0, len = 

转载于:https://www.cnblogs.com/libin-1/p/6139196.html