我正在尝试在单击事件上执行简单的隐藏和显示 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')
}
})
}]);
最佳答案
这称为事件传播/冒泡
。当您单击一个元素时,事件会通过它的所有父元素传播。因此,由于 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
关于javascript - 单击父元素时将类添加到 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32625512/