单击元素外部时触发事件的指令 [英] Directive that fires an event when clicking outside of the element
问题描述
我知道有很多问题要问类似的事情。但是没有人真正解决我的问题。
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.
为什么我需要这个功能？我正在构建一个应用程序，在这个应用程序中，有3个下拉菜单，5个下拉列表（如选中）。所有这些都是角度指令。让我们假设所有这些指令都不同。所以我们有8个指令。所有这些都需要相同的功能：当点击元素时，需要隐藏下拉列表。
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.
我有2个解决方案，但都有问题：
I have 2 solutions for this, but both got issue:
解决方案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.
解决方案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
解决方案如果页面中只有一个指令但我的应用程序中没有指令，则可以正常工作。因为它阻止冒泡，所以首先当我点击dropdown1，显示dropdown1，然后点击dropdown2，点击事件被阻止，所以dropdown1仍然显示在那里，即使我点击dropdown1外。
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.
解决方案B在我的应用程序中工作，我现在正在使用它。但问题是它会导致性能问题。在应用中的任何位置，每次单击都会处理太多的点击事件。在我目前的情况下，有8个click事件与文档绑定，所以每次单击都执行8个函数。这导致我的应用程序非常慢，尤其是在IE8中。
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
推荐答案
我不会使用event.stopPropagation（），因为它会导致您在解决方案A中看到的问题。可能，我也会采取模糊和聚焦事件。当您的下拉列表附加到输入时，您可以在输入失去焦点时将其关闭。
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>
我还没有测试你的onClick功能。我认为它按预期工作。希望这会有所帮助。
I have not tested your onClick function. I assume it works as expected. Hope this helps.
这篇关于单击元素外部时触发事件的指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
