代码之家 › 专栏 › 技术社区 › clestcruz

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

html javascript

clestcruz · 技术社区 · 6 年前

我在想我怎样才能用 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);

2 回复 | 直到 6 年前

pandamakes 6 年前

我猜想这就是它失败的原因:当用户点击文本时, e.target 现在引用的是文本,而不是父包装。尝试改变 e、目标 e.currentTarget 看看能不能用?

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

Quick learner 6 年前

您的代码似乎在我的代码上工作(在添加.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>