javascript - 单击父元素时将类添加到 div

Question

我正在尝试在单击事件上执行简单的隐藏和显示 DOM。我正在显示单击 span#dwnTrigger 时加载菜单容器。但我的问题是，即使我点击 div#loadMenu ，这个 div#loadMenu 也会被隐藏。我不确定如何发生这种情况，因为该事件附加到 span#dwnTrigger。

<span id="dwnTrigger" class="dwnPrint" aria-label="Download" ng-controller="dwnCtrl" > Start
  <div class="dwnCtrl menuContainer ng-hide" id="loadMenu">
    //rest of DOM
  </div>
</span>

Controller

abc.controller('dwnCtrl',['$scope',function($scope){
  $scope.$element = $("#dwnTrigger");
  ($scope.$element).on('click',function() {
    if ($("#loadMenu").hasClass('ng-hide')) {
      $("#loadMenu").removeClass('ng-hide').addClass('ng-show');        
      //rest of code
    }
    else if ($("#loadMenu").hasClass('ng-show')) {
      $("#loadMenu").removeClass('ng-show').addClass('ng-hide')
    }
  })
}]);

Answer 1

这称为事件传播/冒泡。当您单击一个元素时，事件会通过它的所有父元素传播。因此，由于 div#loadMenu 是 span#dwnTrigger 的子级，因此对 div#loadMenu 的点击会传播到 span#dwnTrigger code> 并触发它的事件处理程序。

您可以使用“event.stopPropagation()”来防止这种情况。您必须将点击事件处理程序绑定(bind)到 div#loadMenu，捕获事件并停止传播。

    $('div#loadMenu').click(function(event) {
        event.stopPropagation();
    });

有关 event.stopPropagation() 的更多信息 https://api.jquery.com/event.stoppropagation/和https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

或者，您可以通过 event.target 检查哪个元素调度了事件，并据此采取行动。例如，您的点击处理程序可以如下所示

    ($scope.$element).on('click',function(event) {
        if($(event.target).closest('#loadMenu').length > 0) {
            return;
        }

        if ($("#loadMenu").hasClass('ng-hide')) {
            $("#loadMenu").removeClass('ng-hide').addClass('ng-show');        
           //rest of code
        }
        else if ($("#loadMenu").hasClass('ng-show')) {
            $("#loadMenu").removeClass('ng-show').addClass('ng-hide')
        }
    })

有关 event.target 的更多信息 https://developer.mozilla.org/en-US/docs/Web/API/Event/target