Can someone explain to me why actual mouse click and $('div').click() runs click event 3 times while $('div')[0].dispatchEvent(new MouseEvent('click')) runs click event only 1 time according to browser console?
Here's a simple html code:
<div>test</div>
Here's a javascript code:
$('*').click(function(e){
console.log(e);
});
var c = new MouseEvent('click');
// Actual mouse click output event 3 times
//$('div').click(); // output event 3 times
$('div')[0].dispatchEvent(c); // output event 1 time
/
Thanks
Can someone explain to me why actual mouse click and $('div').click() runs click event 3 times while $('div')[0].dispatchEvent(new MouseEvent('click')) runs click event only 1 time according to browser console?
Here's a simple html code:
<div>test</div>
Here's a javascript code:
$('*').click(function(e){
console.log(e);
});
var c = new MouseEvent('click');
// Actual mouse click output event 3 times
//$('div').click(); // output event 3 times
$('div')[0].dispatchEvent(c); // output event 1 time
http://jsfiddle/5uvjwa4t/2/
Thanks
Share Improve this question edited Aug 14, 2015 at 16:47 diurii asked Aug 14, 2015 at 12:56 diuriidiurii 631 silver badge6 bronze badges 1-
1
Because in
dispatchEventyou specified adivand inclickyou select all using*(including html & body) tags + div. – Zakaria Acharki Commented Aug 14, 2015 at 13:06
1 Answer
Reset to default 7The asterisk matches the <html> and <body tags as well, and as click events bubble it's fired on three elements when you use the asterisk as a selector for the event handler.
$('*') // matches all elements, including html and body
$('div') // matches the DIV only
When you fire a click on a div that is nested like this
<html>
<body>
<div>
The click travels up (bubbles) and fires on all parent elements as well.
Using dispatchEvent fires the event three times for me in Chrome, but there could be differences in other browsers.
To make it consistently bubble the bubbles setting can be set, that way it will behave as a regular click and bubble up.
var c = new MouseEvent('click', {bubbles:true});