问题是点击锚点仍然触发了您的< div>中的点击.这就是所谓的“
event bubbling”.
其实有多种解决方案:
>检查DIV点击事件处理程序是否实际的目标元素是锚点
→ jsFiddle
$('.expandable-panel-heading').click(function (evt) {
if (evt.target.tagName != "A") {
alert('123');
}
// Also possible if conditions:
// - evt.target.id != "ancherComplaint"
// - !$(evt.target).is("#ancherComplaint")
});
$("#ancherComplaint").click(function () {
alert($(this).attr("id"));
});
>从锚点击监听器停止事件传播
→ jsFiddle
$("#ancherComplaint").click(function (evt) {
evt.stopPropagation();
alert($(this).attr("id"));
});
您可能已经注意到,我从示例中删除了以下选择器部分:
:not(#ancherComplaint)
这是不必要的,因为没有类的.expandable-panel-heading也有#ancherComplaint作为其ID.
我假设你想抑制锚的事件.这不能以这种方式工作,因为两个选择器(您和我的)选择完全相同的DIV.选择器在调用时对听众没有影响;它只设置监听器应该注册到的元素的列表.由于这两个版本的列表是一样的,所以没有区别.