如何使用jQuery控制冲突的单击事件

Question

我有以下HTML ...

<div id="panel">
<a class="ext" href="http://google.com">Google</a>
</div>

如果我有$（＃panel）.on（{click：function（e）{...}事件将扩展div高度或折叠它，它如何告诉click事件“not fire”如果我点击.ext类项目，那么我可以去google.com。

感谢您的任何建议

Answer 1

添加：

$('.ext').click(function(e) {
    e.stopPropagation();
});

这样可以防止事件冒泡到#panel元素。

Answer 2

另一种方法是简单地测试click事件的目标：

$('#panel').on({
    click: function(e) {
        var target = e.target,
            $target = $(target);
        if ($target.hasClass('ext')) {
            window.location = target.href;
        }
        else if {
            // do whatever you'd normally do for a click on #panel
        }
    });

参考文献：

• hasClass()。