How to pass browser event through the custom one?

406
November 22, 2016, at 11:01 AM

http://jsfiddle.net/m2dqd236/

document.addEventListener('click', function (event) { 
  $(document).trigger('click-anywhere', $.event.fix(event)); 
}, true); 
 
$(document).on('click-anywhere', function (event, e) { 
  console.log('>>> click-anywhere', arguments); 
  console.log('target', event.target, e.target); 
  console.log('originalEvent', event.originalEvent, e.originalEvent); 
}).on('click', function (event) { 
  console.log('>>> click', arguments); 
  console.log('target', event.target); 
  console.log('originalEvent', event.originalEvent); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
<button>Click me</button>

When you are clicking a button in the example above, you get output like this:

>>> click-anywhere [p.Event, p.Event]
target #document <button>​Click me​</button>​
originalEvent undefined MouseEvent {}
>>> click [p.Event]
target <button>​Click me​</button>​
originalEvent MouseEvent {}

How can I make handler of custom event click-anywhere getting normal event in the first argument? In current realization the event I want to be in the first argument is passed in the second one.

PS: Same question in Russian.

Answer 1

You can't do this with jQuery but you can do it with native Events.

Instead of using jQuery trigger to trigger your custom event use dispatchEventand clone the existing MouseEvent (if you don't the browser will throw an exception that the event has already been dispatched)

document.addEventListener('click', function (event) { 
  console.log(event); 
  event.target.dispatchEvent(new MouseEvent('click-anywhere', event)); 
}, true); 
 
$(document).on('click-anywhere', function (event) { 
  console.log('>>> click-anywhere', arguments); 
  console.log('target', event.target); 
  console.log('originalEvent', event.originalEvent); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
<button>Click me</button>

Rent Charter Buses Company
READ ALSO
how to load more images from a folder using php jquery ajax

how to load more images from a folder using php jquery ajax

i have multiple folders and all folders contain some images upto 20 images. [nnn]in my html page i want to show first 5 images and show click to view more 15 [nnn]and when the user click that link it will show next 15 images.

478
How to show a specific folder when the interface opens in elFinder?

How to show a specific folder when the interface opens in elFinder?

Is there a way to open a specific folder when the elFinder interface opens?.

488
MVC Dynamically pass Model to partialview from a view on DropDownList change

MVC Dynamically pass Model to partialview from a view on DropDownList change

It's a bit of a mouthful, but I have two dropdown lists in my view:.

370
$(&hellip;).function is not a function jQuery

$(…).function is not a function jQuery

I know this issue has been posted in previous posts but nothing helped me and it's driving me crazy, even more I'm sure the answer is pretty simple, but I'm really new to javascript.

359