javascript - 同一元素上的两次单击处理程序发生冲突

Question

我有一个元素#div_1，它在同一文档(不是外部文件)内有一个普通的 JS 函数:

var trigger = false;
var div_1 = document.getElementById('div_1')
div_1.onclick = function() { trigger = true; };

在外部 JS 文件中，我有一个 jQuery 按钮，单击同一元素:

$(document).ready(function() {
 $('#div_1').click(function() {
   // some actions here
 });
});

问题是它完全忽略了 jQuery clickhandler。有没有办法让两个单独的点击处理程序同时工作？

Answer 1

您的代码中肯定还发生了其他事情，因为您当然可以在一个对象上拥有多个事件处理程序。

您只能通过 onclick 分配一个处理程序，但这绝不应该干扰 jQuery 事件处理程序。请在 jsFiddle 中向我们展示一个可重现的演示，因为您的代码可能存在其他一些问题导致此问题。

仅供引用，我强烈建议您不要对事件处理程序使用 onclick 属性，因为存在一个事件处理程序覆盖另一个事件处理程序的危险，而使用 .addEventListener( 时不会发生这种情况) 或 jQuery 的 .click()。但是，.addEventListener() 或 jQuery 的 .click() 都不会覆盖 onlick。

这是一个工作演示，显示两个事件处理程序都运行良好:http://jsfiddle.net/jfriend00/4Ge52/