Javascript Angular JS-如何使用jqLite选择除了给定元素之外的任何东西?
我目前正在编写一个指令来处理移动应用程序中的侧菜单。我可以使用我创建的指令打开菜单,但是我需要能够使用jqLite选择菜单之外的所有内容,以便在单击菜单之外的任何内容时,可以绑定单击事件来关闭菜单 我的指令目前是:Javascript Angular JS-如何使用jqLite选择除了给定元素之外的任何东西?,javascript,angularjs,jqlite,Javascript,Angularjs,Jqlite,我目前正在编写一个指令来处理移动应用程序中的侧菜单。我可以使用我创建的指令打开菜单,但是我需要能够使用jqLite选择菜单之外的所有内容,以便在单击菜单之外的任何内容时,可以绑定单击事件来关闭菜单 我的指令目前是: .directive('asideMenuButton', [function() { return { restrict: 'A', link: function(scope, $el, attrs) { $el.on('clic
.directive('asideMenuButton', [function() {
return {
restrict: 'A',
link: function(scope, $el, attrs) {
$el.on('click', function(e) {
e.preventDefault();
var $aside = angular.element(document.getElementById(attrs.parent));
if ($aside.hasClass('active')) {
$aside.removeClass('active');
} else {
$aside.addClass('active');
}
});
}
};
}]);
基本用法如下:
<a aside-menu-button href="#" data-parent="<aside ID>">Link</a>
angular.module('wowpr.directives', [])
.directive('asideMenuButton', [function() {
return {
restrict: 'A',
link: function(scope, $el, attrs) {
var $aside = angular.element(document.getElementById(attrs.parent));
var $body = angular.element(document.getElementsByTagName('body'));
$body.on('click', function(e) {
if ($aside.hasClass('active')) {
$aside.removeClass('active');
}
});
$aside.on('click', function(e) {
e.stopPropagation();
});
$el.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
if ($aside.hasClass('active')) {
$aside.removeClass('active');
} else {
$aside.addClass('active');
}
});
}
};
}]);
它不会在body click事件中检查被单击的元素是否是菜单,而是在单击菜单时,它会停止向body传播单击事件。这样,当您单击菜单时,不会触发正文单击事件。将单击事件绑定到文档或正文元素。然后检查目标元素是否不是菜单的一部分。如果没有,请关闭菜单
angular.element(document).on("click",function(e){
if( !angular.element(e.target).hasClass("someMenuClass") ) {
closeMenu();
}
});
将单击事件绑定到文档或主体元素。然后检查目标元素是否不是菜单的一部分。如果没有,请关闭菜单
angular.element(document).on("click",function(e){
if( !angular.element(e.target).hasClass("someMenuClass") ) {
closeMenu();
}
});
对此,我提出了一个非常类似的解决方案。我会接受这一点作为答案,并在我的问题中公布我在最后做了什么。我对此有一个非常类似的解决方案。我会接受这个答案,并在我的问题中公布我最后做了什么。