jquery - 如何避免点击选择器的子元素？

Question

我正在研究 jQuery 选择器并遇到了这个麻烦:

<div class="pull-left">
    <span class="fa fa-circle"></span>
    <a class="name" href="#">User name</a>
</div>

pull-left类的宽度为 180px和name类的宽度 ~ 80px .

我想为 pull-left 编写一个事件类(name 类除外)。我试过:

$event.chatwindow = {
    resize: function () {
        let _this = $(this),
            chatwindow = _this.closest('.chat-window'),
            body_content = chatwindow.find('.body-content');

        // test while clicking on <a> tag
        // but always getting:
        // <div class"pull-left">...</div>
        $log(this);

        // avoid to click <a> tag
        if (!_this.hasClass('name')) {

            if (!body_content.hasClass('hidden')) {
                body_content.addClass('hidden');
            } else {
                body_content.removeClass('hidden');
            }

        }
    }
};

$(document).on('click', '.chat-window .header .pull-left', $event.chatwindow.resize);

但是当我尝试单击a时标签，窗口仍然隐藏/显示。

如何在单击 pull-left 时运行该事件div 但避免 <a>标签？

谢谢!

Answer 1

this 是 pull-left 元素。

使用事件target来检查哪个子项被点击

$event.chatwindow = {
    resize: function (event) {
        ....

        if(!$(event.target).hasClass('name') {
          // body class stuff 
        }

   }
}