[英]ng-blur on a DIV
I am trying to hide a DIV
on blur (the focus has been removed from the DIV
). 我试图在模糊上隐藏
DIV
(焦点已从DIV
移除)。 I am using angular and bootstrap. 我正在使用角度和引导程序。 So far I have tried setting "focus" on the
DIV
when it is shown and then an ng-blur
function when the user click anywhere else on the screen. 到目前为止,我已经尝试在显示时在
DIV
上设置“焦点”,然后在用户点击屏幕上的任何其他位置时设置ng-blur
功能。 This is not working. 这不起作用。
Basically the problem is I cannot set focus on my " #lockerBox
" through JS, my " hideLocker
" function works no problem when focus is given to my DIV
with clicking it. 基本上问题是我无法通过JS将注意力集中在我的“
#lockerBox
”上,当我点击DIV
时,我的“ hideLocker
”函数没有问题。
<div class="lock-icon" ng-click="showLocker(result); $event.stopPropagation();"></div>
<div ng-show="result.displayLocker" id="lockerBox" ng-click="$event.stopPropagation();" ng-blur="hideLocker(result)" tabindex="1">
$scope.displayLocker = false;
$scope.showLocker = function ( result ) {
$scope.displayLocker = !$scope.displayLocker;
node.displayLocker = $scope.displayLocker;
function setFocus() {
angular.element( document.querySelector( '#lockerBox' ) ).addClass('focus');
}
$timeout(setFocus, 100);
};
$scope.hideLocker = function ( node ) {
$scope.displayLocker = false;
node.displayLocker = $scope.displayLocker;
};
Just add tabindex="-1"
attr to the div
and it gives it the same behave like an input - 只需将
tabindex="-1"
attr添加到div
,它就会像输入一样表现出相同的行为 -
<div tabindex="-1" ng-blur="onBlur()"></div>
https://jsfiddle.net/ast12nLf/1/ https://jsfiddle.net/ast12nLf/1/
(Inspired from here - https://stackoverflow.com/a/17042452/831294 ) (灵感来自这里 - https://stackoverflow.com/a/17042452/831294 )
我最终只在具有onclick的元素上设置blur事件。
Even I had the same problem - but was able to resolve it using 'mouseup' event on the entire document in a custom directive following is the code, where I am toggling an accordion contained in a div as pop-up using ng-show()="variable" now this variable is the key here across menu toggle button HTML Element, div pop up HTML Element, and the custom directive to handle mouse up! 即使我有同样的问题 - 但是能够在自定义指令中使用'mouseup'事件在整个文档中解决它以下是代码,其中我使用ng-show将包含在div中的手风琴切换为弹出窗口( )=“变量”现在这个变量是菜单切换按钮HTML元素,div弹出HTML元素以及处理鼠标的自定义指令的关键!
var dummyDirective = angular.module(dummyDirective, []); dummyDirective.directive('hideOnMouseUpElsewhere', function() { return { restrict: 'A', link: function(scope, element, attr) { $(document).mouseup(function(e) { var container = $(element); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0 && scope.status.menuVisible // ... nor a descendant of the container && !(e.target.id === attr.excludeClick)) // do not execute when clicked on this { scope.status.menuVisible = false; scope.$apply(); } }); } } })
where container will have the DOM element you applied 'hideOnMouseUpElsewhere' directive on along with added attribute 'excludeClick' and e.target is the one DOM element where you click 容器将具有您应用'hideOnMouseUpElsewhere'指令的DOM元素以及添加的属性'excludeClick',而e.target是您点击的一个DOM元素
Following is the HTML code for a accrodian bootstrap angular popup menu: 以下是accrodian bootstrap角度弹出菜单的HTML代码:
<a id="MenuAnchor" href="" data-toggle="dropdown" class="dropdown-toggle" ng-click="status.menuVisible = !status.menuVisible;"> <i id= "MenuIcon" class="glyphicon glyphicon-cog" style="font-size:20px; color: #428bca; cursor:pointer;"></i> </a> <div id ="MenuPane" ng-blur="status.menuVisible=false;" hide-on-mouse-up-elsewhere exclude-click='MenuIcon'> <div class="btn-group favoritesMenu" style="width: 300px;" ng-show="status.menuVisible" > <accordion close-others="true"> <accordion-group > <accordion-heading>....</accordion-heading> <div ng-click="status.menuVisible=false;">Data</div> </accordion-group> </accordion>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.