Question

我在标题内有一个链接，例如

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

一些示例javascript，在链接上挂钩点击事件，以及表头元素上的mousemove事件。

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);

不幸的是，当我添加mousedown时，点击事件不再由点击引发。我已经检查了谷歌开发者工具中的事件，他们都在那里。如何触发点击事件？

这里有一个完整的jsfiddle：https://jsfiddle.net/nickwinters/xLz8agy0/1/

Answer 1

您需要使用console.log();代替alert()。

因为在鼠标按下时调用alert()函数会在单击函数中用mouseup中断，因此点击函数中的alert不会被触发。

Answer 2

以下是两个点击事件的示例，一个在另一个内部。通过在click事件上使用停止传播功能，您可以阻止事件冒泡并触发另一个事件。

'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/

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

2 个答案: