Javascript 如果单击子元素，则不会触发单击

我试图弄清楚，如果我在单击子元素，如何使用单击时的

触发动作或事件。显然，如果我尝试单击父元素，按钮就会起作用，但是如果我尝试单击子元素所在的文本，按钮就会起作用。该操作或事件不会触发

下面是组件的外观。单击其周围的空间（即父对象），事件将生效。但是如果我试着点击文本，它就不起作用了


下面是标记的外观

    <div class="modal">
     <div class="view-types -bordered">
         <div class="view-type">
             <div class="view-switch-list">List</div>
         </div>
         <div class="view-type">
             <div class="view-switch-map">Map</div>
         </div>
     </div>
    </div>

您的代码似乎在我的代码上工作（添加.modal父级后）；即使单击内部的文本元素，仍会触发
警报（“Hello World”）

一定要试试这个片段，谢谢


“严格使用”；
（函数（$）{
var viewSwitch={
init:function（）{
此.$viewTab=$（'.modal.view types.view type'）；
此.$viewLayout=$（'.modal.view layout'）；
选择（1）；
this.$viewTab.on（'click'，this.\u onTabClick.bind（this））；
},
选择：功能（i）{
这个；
$（this.$viewTab[i]）。children（'div'）。addClass（'-active'）；
$（此.$viewLayout[i]）.addClass（'-active'）；
},
_onTabClick：函数（e）{
警报（“你好，世界！”）；
让index=$（e.target）.index（）；
选择（索引）；
},
_重置：函数（）{
这个.$viewTab.children（'div'）.removeClass（'-active'）；
这个.$viewLayout.removeClass（'-active'）；
},
}
$（窗口）.on（'load'，function（）{
init（）；
})
})（jQuery）
。视图类型{
边框：1px纯黑；
填充：5px7px 5px7px；
显示：内联块；
边际：0px；
光标：指针；
}

列表
地图
我认为这就是它失败的原因：当用户单击文本时，
e.target
现在指的是文本，而不是父包装。尝试将
e.target
更改为
e.currentTarget
，看看它是否有效

编辑：引用：
您忘记将父元素包含在modal类中。
'use strict';

(function($) {

    var viewSwitch = {

        init : function() {

            this.$viewTab = $('.modal .view-types .view-type');
            this.$viewLayout = $('.modal .view-layout');

            this.select(1);
            this.$viewTab.on('click', this._onTabClick.bind(this));
        },

        select: function(i) {
            this._reset();
            $(this.$viewTab[i]).children('div').addClass('-active');
            $(this.$viewLayout[i]).addClass('-active');
        },

        _onTabClick: function(e) {
            let index = $(e.target).index();
            this.select(index);

        },

        _reset: function() {
            this.$viewTab.children('div').removeClass('-active');
            this.$viewLayout.removeClass('-active');
        },
    }

    $(window).on('load', function() {
            viewSwitch.init();
    })


})(jQuery);