如果单击子元素,则不会触发“单击”

我在想我怎样才能用 on click 如果我点击一个子元素。显然,如果我尝试单击父元素,按钮就会工作,但是如果我尝试单击子元素所在的文本,按钮就会工作。动作或事件不会触发。

下面是标记的样子。

    <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>

Javascript语言

'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);