Question

I have a Jquery UI resize handler and it is positioned absolutely over a div which contains set of LI’s (here it is set of dates).
So when i click on any date the click event is not propogated since the resize div is above the LI’s.

So how can i get the li’s to handle click ?

JSFIDDLE – http://jsfiddle.net/svXTa/1/

Answer 1

As I already stated, it’s impossible to allow for clicking through an element without breaking its mouse events.

I’d recommend reviewing your design and choosing a solution which doesn’t overlay an element above elements which have a click handler bound to them.

Anyway, if you wish to stay with the current setup, here’s my hackish solution which doesn’t break the resizable element while invoking the click handlers for the elements below it:

$('#dgArea').click(function(e) {
    $(this).hide();
    $(document.elementFromPoint(e.pageX, e.pageY)).click();
    $(this).show();
});

Fiddle

Note that document.elementFromPoint is not supported in ancient browsers, so if that’s an issue, you may implement it manually. Here’s one way to do this.