链接点击事件被父mousedown事件阻止

Question

I have a link inside a header such as this

<table id="mytable" border=1>
<thead>
  <th id='myHeader'><a href="#" class="sortHeader">HelloWorld</a></th>
</thead>
</table>

And some sample javascript, hooking up a click event on the link, and a mousemove event on the table header element.

var randomFunction = function(event, id){
    alert('header was moved');
}

$('#mytable').on('click', '.sortHeader', function(evt){
    alert('header was clicked')
});

var header = document.getElementById('myHeader');
header.addEventListener('mousedown', randomFunction);

Unfortunately, when I add the mousedown, the click event no longer is set off by a click. I've checked the events in google developer tools, and they're both there. How do I get the click event to fire?

Here's a full jsfiddle: https://jsfiddle.net/nickwinters/xLz8agy0/1/

Answer 1

You need to use console.log(); instead of alert() .

Because on mouse down your calling the alert() function which interrupts with mouseup in click function, hence alert in the click function is not triggered.

Answer 2

Here is an example of having two click events, one inside the other. By using the stop propagation function on the click event you can stop the event from bubbling up and triggering the other event.

'use strict';

let outer = document.querySelector('.outer');
let inner = document.querySelector('.inner');

let outerClick = (e) => {
  alert('outer clicked');
}

let innerClick = (e) => {
  e.stopPropagation();
  alert('inner clicked');
}

outer.addEventListener('click', outerClick);
inner.addEventListener('click', innerClick);

https://jsfiddle.net/pz47f1kx/