Directive that fires an event when clicking outside of the element
JavascriptAngularjsJavascript Problem Overview
I know there are many questions ask similar thing. But no one really solve my issue.
I'm trying to build an directive which will execute an expression when mouse click outside the current element.
Why I need this function? I'm building an app, in this app, there are 3 dropdown menu, 5 dropdown list(like chosen). All these are angular directives. Let's assume all these directives are different. So we have 8 directives. And all of them need a same function: when click out side the element, need hide the dropdown.
I have 2 solutions for this, but both got issue:
Solution A:
app.directive('clickAnywhereButHere', function($document){
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
elem.bind('click', function(e) {
// this part keeps it from firing the click on the document.
e.stopPropagation();
});
$document.bind('click', function() {
// magic here.
scope.$apply(attr.clickAnywhereButHere);
})
}
}
})
Here is an example for solution A: click here
When you click the first dropdown, then working, then click second input, the first should hide but not.
Solution B:
app.directive('clickAnywhereButHere', ['$document', function ($document) {
directiveDefinitionObject = {
link: {
pre: function (scope, element, attrs, controller) { },
post: function (scope, element, attrs, controller) {
onClick = function (event) {
var isChild = element.has(event.target).length > 0;
var isSelf = element[0] == event.target;
var isInside = isChild || isSelf;
if (!isInside) {
scope.$apply(attrs.clickAnywhereButHere)
}
}
$document.click(onClick)
}
}
}
return directiveDefinitionObject
}]);
Here is example for solution B: click here
Solution A working if there is just one directive in the page but not in my app. Because it's prevent bubbling, so first when I click on dropdown1, show dropdown1, then click on dropdown2, click event be prevent, so dropdown1 still showing there even I click outside the dropdown1.
Solution B working in my app which I'm using now. But the issue is it's cause a performance issue. Too many click event be handled on every single click on anywhere in the app. In my current case, there are 8 click event bind with document, so every click execute 8 functions. Which cause my app very slow, especially in IE8.
So is there any better solution for this? Thanks
Javascript Solutions
Solution 1 - Javascript
I would not use event.stopPropagation() since it causes exactly the kind of problems you see in solution A. If possible, I would also resort to blur and focus events. When your dropdown is attached to an input, you can close it when the input loses the focus.
However, handling click events on the document is not so bad either, so if you want to avoid handling the same click event several times, just unbind it from the document when it is not needed anymore. In addition to the expression being evaluated when clicking outside the dropdown, the directive needs to know whether it is active or not:
app.directive('clickAnywhereButHere', ['$document', function ($document) {
return {
link: function postLink(scope, element, attrs) {
var onClick = function (event) {
var isChild = $(element).has(event.target).length > 0;
var isSelf = element[0] == event.target;
var isInside = isChild || isSelf;
if (!isInside) {
scope.$apply(attrs.clickAnywhereButHere)
}
}
scope.$watch(attrs.isActive, function(newValue, oldValue) {
if (newValue !== oldValue && newValue == true) {
$document.bind('click', onClick);
}
else if (newValue !== oldValue && newValue == false) {
$document.unbind('click', onClick);
}
});
}
};
}]);
When using the directive, just provide another expression like this:
<your-dropdown click-anywhere-but-here="close()" is-active="isDropdownOpen()"></your-dropdown>
I have not tested your onClick function. I assume it works as expected. Hope this helps.
Solution 2 - Javascript
You should use ngBlur and ngFocus to show or hide your dropdowns. When somebody clicks it then it gets focused else it gets blurred.
Also, refer to this question https://stackoverflow.com/q/14833326/1675580 for setting focus in AngularJS.
EDIT : For every directive (drop down menu or list, lets call it Y) you will have to show it when you click on an element (lets call it X) and you need to hide it when you click anywhere outside Y (excluding X obviously). Y has property isYvisisble. So when somebody clicks on X (ng-click) then set "isYvisible" to be true and set Focus on Y. When somebody clicks outside Y (ng-blur) then you set "isYvisible" to be false, it gets hidden. You need to share a variable ("isYvisible") between two different element/directives and you can use scope of controller or services to do that. There are other alternatives to that also but that is outside scope of question.
Solution 3 - Javascript
Your solution A is the most correct, but you should add another parameter to the directive for tracking if it is open:
link: function(scope, elem, attr, ctrl) {
elem.bind('click', function(e) {
// this part keeps it from firing the click on the document.
if (isOpen) {
e.stopPropagation();
}
});
$document.bind('click', function() {
// magic here.
isOpen = false;
scope.$apply(attr.clickAnywhereButHere);
})
}
Solution 4 - Javascript
post: function ($scope, element, attrs, controller) {
element.on("click", function(){
console.log("in element Click event");
$scope.onElementClick = true;
$document.on("click", $scope.onClick);
});
$scope.onClick = function (event) {
if($scope.onElementClick && $scope.open)
{
$scope.onElementClick = false;
return;
}
$scope.open = false;
$scope.$apply(attrs.clickAnywhereButHere)
$document.off("click", $scope.onClick);
};
}
Solution 5 - Javascript
A bit simpler version than most upvoted answer, for me it's more clear and works just fine!
app.directive('clickAnywhereButHere', function() {
return {
restrict : 'A',
link: {
post: function(scope, element, attrs) {
element.on("click", function(event) {
scope.elementClicked = event.target;
$(document).on("click", onDocumentClick);
});
var onDocumentClick = function (event) {
if(scope.elementClicked === event.target) {
return;
}
scope.$apply(attrs.clickAnywhereButHere);
$(document).off("click", onDocumentClick);
};
}
}
};
});
Solution 6 - Javascript
Here is a solution I am using (possible a bit late answer, but hopefully helpful for others who come through this)
link: function (scope, element, attr) {
var clickedOutsite = false;
var clickedElement = false;
$(document).mouseup(function (e) {
clickedElement = false;
clickedOutsite = false;
});
element.on("mousedown", function (e) {
clickedElement = true;
if (!clickedOutsite && clickedElement) {
scope.$apply(function () {
//user clicked the element
scope.codeCtrl.elementClicked = true;
});
}
});
$(document).mousedown(function (e) {
clickedOutsite = true;
if (clickedOutsite && !clickedElement) {
scope.$apply(function () {
//user clicked outsite the element
scope.codeCtrl.elementClicked = false;
});
}
});
}
Solution 7 - Javascript
Here is a solution I used that only needs the click's event (available as $event in the ngClick directive). I wanted a menu with items that, when clicked would:
- toggle a submenu's display
- hide any other submenu if it were displayed
- hide the submenu if a click occurred outside.
This code sets class 'active' on the menu item so that can be used to show or hide it's submenu
// this could also be inside a directive's link function.
// each menu element will contain data-ng-click="onMenuItemClick($event)".
// $event is the javascript event object made available by ng-click.
$scope.onMenuItemClick = function(menuElementEvent) {
var menuElement = menuElementEvent.currentTarget,
clickedElement = menuElementEvent.target,
offRootElementClick; // where we will save angular's event unbinding function
if (menuElement !== clickedElement) {
return;
}
if (menuElement.classList.contains('active')) {
menuElement.classList.remove('active');
// if we were listening for outside clicks, stop
offRootElementClick && offRootElementClick();
offRootElementClick = undefined;
} else {
menuElement.classList.add('active');
// listen for any click inside rootElement.
// angular's bind returns a function that can be used to stop listening
// I used $rootElement, but use $document if your angular app is nested in the document
offRootElementClick = $rootElement.bind('click', function(rootElementEvent) {
var anyClickedElement = rootElementEvent.target;
// if it's not a child of the menuElement, close the submenu
if(!menuElement.contains(anyClickedElement)) {
menuElement.classList.remove('active');
// and stop outside listenting
offRootElementClick && offRootElementClick();
offOutsideClick = undefined;
}
});
}
}
Solution 8 - Javascript
@lex82 answer is good, and forms the basis of this answer but mine differs in a few ways:
-
Its in TypeScript
-
It removes the click binding when the scope is destroyed meaning you do not have to manage the click binding separately with a property
-
The timeout ensures that if the object with
click-outon is created via a mouse event, that the very same mouse event doesn't actually inadvertently trigger the close mechanismexport interface IClickOutDirectiveScope extends angular.IScope { clickOut: Function; } export class ClickOutDirective implements angular.IDirective { public restrict = "A"; public scope = { clickOut: "&" } public link: ($scope: IClickOutDirectiveScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) => void; constructor($timeout: angular.ITimeoutService, $document: angular.IDocumentService) { ClickOutDirective.prototype.link = ($scope: IClickOutDirectiveScope, $element: angular.IAugmentedJQuery, attrs: ng.IAttributes) => { var onClick = (event: JQueryEventObject) => { var isChild = $element[0].contains(event.target); var isSelf = $element[0] === event.target; var isInside = isChild || isSelf; if (!isInside) { if ($scope.clickOut) { $scope.$apply(() => { $scope.clickOut(); }); } } } $timeout(() => { $document.bind("click", onClick); }, 500); $scope.$on("$destroy", () => { $document.unbind("click", onClick); }); } } static factory(): ng.IDirectiveFactory { const directive = ($timeout: angular.ITimeoutService, $document: angular.IDocumentService) => new ClickOutDirective($timeout, $document); directive.$inject = ["$timeout", "$document"]; return directive; } } angular.module("app.directives") .directive("clickOut", ClickOutDirective.factory());