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.
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 dispatchEvent
and 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>
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
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.
Is there a way to open a specific folder when the elFinder interface opens?.
It's a bit of a mouthful, but I have two dropdown lists in my view:.
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.