why click event triggered twice

diff between jquery click and normal click

by shawn_peng

HTML

<span id='parent'>
     <button id="children" onclick="alert('children')">normal     click</button> 
</span>

<button id='test'>jquery Click</button>

<p>
open console to check the difference
</p>

JavaScript

document.getElementById('parent').onclick = function(e) {
  alert('parent')
  console.log('parent', e)
};

$('#test').click(function() {

  // comment this line and run, 'parent' will be alerted TWICE!!! since both mouseEvent and jQuery.Event trigger the onclick listener
  // $('#children').click(function(e) {e.stopPropagation()})

  // trigger with jquery click method
  $('#children').click();
});