在我的案例中,如何检测点击和操作元素
How to detect a click and manipulate element in my case
当用户点击页面中的任何位置时,我正在尝试检测文档点击。我还想防止点击div来触发文档点击。
我有类似的东西
//Directive for page click
angular.module('myApp').directive('documentClick', ['$rootScope',
function($rootScope) {
return function(scope, element, attrs) {
element.bind('click', function(e){
$rootScope.$broadcast('pageClick');
})
}
}]);
controller JS
//within a controller
$scope.toggleDiv = function() {
$scope.openDiv = !$scope.OpenDiv;
}
$scope.$on('pageClick', function($event) {
$scope.openDiv = false;
})
html
<body document-click>
<div ng-controller = 'ctrl'>
<div id='testDiv'>
<div id='childDiv' ng-click="toggleDiv()">
toggle div here
</div>
</div>
</div>
</body>
我不想在单击"childDiv
"时触发$scoep.openDiv = false
。我只想在单击页面中的任何位置时触发$scope.openDiv = false
。
有没有一种有角度的方法可以做到这一点?
谢谢!
您可以传递事件e
并检查target.id
:
$rootScope.$broadcast('pageClick', e);
$scope.$on('pageClick', function($event, e) {
if(e.target.id !== 'childDiv')
$scope.openDiv = false;
})
相关文章:
- 在幻灯片放映时检测元素具有特定类
- Javascript检测元素前面的元素
- 使用jquery.visible.js和偏移量检测元素是否在视口中
- 滚动后,检测元素何时返回到原始位置
- 无法按类名检测元素
- 如何在Angular中有效地检测元素点击
- 如何使用 jQuery 检测元素的顶部靠近浏览器底部
- 我需要一种新的方法来检测元素 HTML 是否有更改
- 我们如何检测元素外部的双击
- JavaScript中有没有办法检测元素是否附加了任何事件
- 检测元素高度变化,如果太小则隐藏
- 如何检测元素在跨域父级的iframe中是否可见
- jQueryUI-检测元素是否被拖动
- 使用JavaScript检测元素外部的点击
- JQuery:检测元素和所有子元素何时加载
- 在没有JQuery的情况下激发此不可检测元素的.click()事件
- 如何检测元素外部的点击,但该元素有子元素
- 检测元素是否已通过javascript调整大小
- 如何检测元素外部的触摸端事件
- 检测元素外的子对象何时获得焦点