堆叠式画布事件

Question

我有一个透明背景的画布叠在另一个画布上面，希望两个画布上的元素都能够响应鼠标事件。然而，上层画布会阻止任何鼠标事件传递到下层画布。请问最佳解决方案是什么？

     <div class="outer">
      <div class="inner" id="canvas_container_1"></div>  
      <div class="inner" id="canvas_container_2"></div>   
     </div> 

- mikael

Answer 1

您可以像这样对所有元素模拟触发器：http://jsfiddle.net/AzNQb/。

var handler = function(e) {
    // the actual handler
    console.log(e.pageX, this);
};

$(".inner").on("mousedown", function(e) {
    var args = arguments;
    var value;
    $(".inner").each(function() {
        // call handler for each element; preserve `return false` functionality
        if(handler.apply(this, args) === false) {
            value = false;
            return false;
        }
    });
    return value;
});

- pimvdb

---

然而，我希望鼠标事件在两个画布上都能够正确触发，而不仅仅是调用特定的处理函数。我尝试在.each函数内部使用this.trigger(e)，但它没有起作用。有什么最好的方法来实现这一点？ - mikael

Answer 2

你是指两个内部画布吗？

如果是的话，只需在你的“内部”类上添加事件监听器：

$('.outer').on('click','.inner',function() { ... })

- greg