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 
        }

   }
}

Answer 2

您可以使用jQuery event.stopPropagation() 来执行此操作

resize: function (event) {
    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
    event.stopPropagation();
}

如何避免单击选择器的子元素？

2 个答案: