Question

I’m trying to get my jQuery event callback to trigger correctly, but I can’t seem to get around the fact the element I am interested in not receiving the event because of another element that covers it on the page. I can summarise it as follows (I’ve styled the elements so they show up in a 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>​

With the segment above, if I try to listen to mouse clicks on the <canvas>, the event never gets called:

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

However, if I modify my event handler to listen to the <div> element instead, the callback is triggered as expected:

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

How can I coerce my <canvas> to receive events, whilst leaving the offending <div> block in the fore-front?

Answer 1

This should be the simplest solution, as already proposed:

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

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

if you need the original eventdata:

$('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);
});