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>

POPULAR ONLINE

How to bind Jquery function to click? [duplicate]

$_FILES[] is empty in jQuery generated form

wit.ai runActions how to handle context in follow-up message

When do you have too many tables?

Serving favicon next.js

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

jQuery

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

jQuery

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

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