Question

我正在尝试做一个简单的隐藏和放大在点击事件上显示DOM。我正在显示单击span＃dwnTrigger时的loadMenu容器。但我的问题是，即使我点击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>

控制器

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

这称为事件propagation/bubbling。单击元素时，事件将通过其所有父项传播。因为div#loadMenu是span#dwnTrigger的孩子，div#loadMenu上的点击会传播到span#dwnTrigger并触发它的事件处理程序。

您可以使用'event.stopPropagation（）'来防止这种情况发生。您必须将点击事件处理程序绑定到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

的更多信息

在单击父元素时添加到div的类

1 个答案: