pass eventdata to event handler in javascript

Question

I have two div :

<div id="div1"></div>
<div id="div2"></div>

and i have the following jquery for div1:

 $('#div1').click(function(e)
{
alert(e.pageX + ' ' + e.pageY);
});

. Now, i want to trigger click eventhandler of div1 to execute on clcicking of div2. For this i wrote:

$('div2').click(function(e)
{
$('#div1').trigger('click');
});

It's working fine but the problem is i am not able to get e.pageX and e.pageY in the event handler of div1. How to pass eventdata of div2 click event handler i.e e to div1 click event handler. Please help.

Answer 1

Since the event you want to trigger is of the same type, you can pass the old event object right along:

$('#div2').click(function (e) {
    $('#div1').trigger(e);
});

For events of a different type, you may create a custom event object:

$('#div2').mouseenter(function (e) {
    var newE = jQuery.Event('click');
    newE.pageX = e.pageX;
    newE.pageY = e.pageY;
    $('#div1').trigger(newE);
});

Answer 2

jQuerys .trigger()^help should be the answer here. You can pass in event-strings (along with parameters) aswell as event objects.

$('#div2').click(function(e) {
    $('#div1').trigger(e);
});