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

Question

如果要单击子元素，我想弄清楚如何使用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);

Answer 1

我相信这就是它无法正常工作的原因：当用户单击文本时，e.target现在是指文本，而不是父包装。尝试将e.target更改为e.currentTarget，看看是否可行？

编辑：参考：https://developer.mozilla.org/en-US/docs/Web/Events/click#Properties

Answer 2

您的代码似乎在我的代码上起作用（添加.modal父级之后）；即使我单击其中的文本元素，仍会触发alert("Hello World")。

请尝试一下摘录，谢谢。

'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) {
      alert("Hello World!");
      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);

.view-type {
  border: 1px solid black;
  padding: 5px 7px 5px 7px;
  display: inline-block;
  margin: 0px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>