js阻止事件冒泡失效怎么解决？

Question

点击button按钮时，显示其子元素（添加class方式）ul列表，但是点击ul内容时会触发父元素button按钮的点击事件，导致ul列表隐藏，即使是阻止了时间冒泡，点击子元素时依然会触发

<button class="user-btn visible-xs visible-sm" id="user-btn">
    <i class="fa fa-user-circle-o"></i>
    <ul class="user-btn-group">
        <li>同步数据</li>
        <li>恢复默认</li>
        <li><a href="javascript:;" class="logout" onclick="$authVue.logout()">退出登录</a></li>
    </ul>
</button>

js代码：

$("#user-btn").click(function (event) {
    $(this).toggleClass('show-user-btn');
    event.stopPropagation();
});

Answer 1

你这个阻止冒泡是user-btn上的 它阻止的是button外层的事件 冒泡是由里向外 你应该在点击ul或者li时候阻止冒泡

Answer 2

@我是预言家 感谢提供思路，找到解决办法了：

$("#user-btn").click(function (event) {
    if(event.target.offsetParent==this){ 
        $("#user-btn").toggleClass('show-user-btn');
    }
});