javascript - 当选择器元素被另一个元素遮挡时使用 jQuery .on()

Question

我试图让我的 jQuery 事件回调正确触发，但我似乎无法回避这样一个事实:我感兴趣的元素没有接收到事件，因为页面上有另一个元素覆盖了它。我可以将其总结如下(我对元素进行了样式设置，以便它们显示在 jsfiddle 中):

<div id='mydiv'>
    <div style="border: 1px solid; border-color: red; position: absolute; left: 0px; top: 0px; width: 200px; height: 200px; z-index: 100">Hello</div>
    <canvas style="border: 1px solid; border-color: yellow; position: absolute; left: 50px; top: 50px; width: 150px; height: 150px"></canvas>
</div>​

对于上面的片段，如果我尝试听 <canvas> 上的鼠标点击，该事件永远不会被调用:

$('#mydiv').on('mousedown', 'canvas', this, function(ev) {
    console.log(ev.target);
});

但是，如果我修改事件处理程序以监听 <div>相反，回调会按预期触发:

$('#mydiv').on('mousedown', 'div', this, function(ev) {
    console.log(ev.target);
});

我怎样才能强制我的<canvas>接收事件，同时留下违规的<div>挡在最前面？

Answer 1

正如已经提出的那样，这应该是最简单的解决方案:

http://jsfiddle.net/CUJ68/4/

$('canvas').on('mousedown', function(ev) {
    console.log(ev.target);
});
$('ul').on('mousedown', function(ev){
    $('canvas').mousedown();
});

如果您需要原始事件数据:

$('canvas').bind('mousedown', function(ev, parentEV) {
    if(parentEV){
        console.log(parentEV);
        alert("Canvas INdirectly clicked!");
    }else{
        console.log(ev);
        alert("Canvas directly clicked!");
    }
});
$('ul').on('mousedown', function(ev){
    $('canvas').trigger('mousedown', ev);
});