js怎么DIV失去焦点是触发事件(如果焦点在DIV的子元素上面也不能触发事件)_百度知道
js怎么DIV失去焦点是触发事件(如果焦点在DIV的子元素上面也不能触发事件)
一个DIV里面有input，我需要在DIV失去焦点(焦点在input上不算)的时候触发DIV隐藏事件需要怎么做？还有这个DIV在iframe里面
提问者采纳
如果你会angularJs的话，把元素双向绑定一个显示的事件应该就可以了…。显然客观是想用jQuary来实现，可是，jquary又没有失去焦点这个事件，怎么办QAQ？这种时候就应该反向思考。首先，给全集添加一个 focus()的事件，并且在其中添加一个过滤器。在focus的是指定的div（或者|和input）时，不触发事件，剩下的情况，将div隐藏。为了避免冲突，也可以自定义一个focus事件来做响应。
最开始我是想在body上添加一个点击事件
然后判断点击的元素是不是这个DIV
可是后来发现这个有问题，如果点击DIV的父页面
那么这个DIV就不能隐藏了。
如果单纯的在DIV上面绑定focusout，点击DIV里面input又会触发隐藏这样就不是我想要的了
额…第一个思路应该是可行的，点击父页面指的是iframe吗？（focusout也行，不过比较麻烦，你在内部判断event.target是不是这个input然后return false应该也能实现）按照第一个思路走的话，把dom树发出来看看吧……
第一个思路是不行的，因为需要考虑到当前DIV是否存在父页面、是否存在子页面这两种情况，如果只绑定当前页面的body，点击其他页面的body就不能隐藏了用focusout还是有问题，因为点击DIV里面的input会触发focusout方法
不要取body,用document试试，应该就能监听到所有事件了。至于focusout,在里面加一个if判断，如果触发事件的是 input元素，就什么都不做，然后返回假。如果不是input元素，就进行隐藏操作。如果元素太多，读取不到的话，就干脆读取鼠标的位置好了，并且和div做一个比对好了。
提问者评价
来自团队：
其他类似问题
为您推荐：
div的相关知识
其他2条回答
不太明白你的意思，div失去焦点是指鼠标移出div区域吗？另外你说的“div隐藏事件”是说使div隐藏起来的事件吗？
不是鼠标移出，是失去焦点，鼠标点击某一个元素那么焦点就在这个元素上面，再点击别的元素，那么当前的元素就失去了焦点， 失去焦点的时候把DIV隐藏起来就行了
楼下的方案可以。
可以用鼠标移出事件!
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁angularJS的双向数据绑定演示例子教程-js教程-网页制作-壹聚教程网angularJS的双向数据绑定演示例子教程下文为各位详细的介绍了angularJS的双向数据绑定演示例子，这个例子可以让各位更清楚的知道如何来使用angularJS的双向数据绑定功能。
最近在读一本书《精通AngularJS》，觉得不错，于是做一下笔记，方便记忆。一个简单的angular代码：&html&
&&&&&script&src=&///angular.js/1.2.28/angular.js&&&/script&
&&&&&script&type=&text/&&
&&&&&&&&var&HelloCtrl&=&function&($scope)&{
&&&&&&&&&&&&$scope.name&=&'World';
&&&&&&&&&&&&$scope.getName&=&function()&{
&&&&&&&&&&&&&&&&return&$scope.
&&&&&&&&&&&&};
&&&&&/script&
&body&ng-app&
&div&ng-controller=&HelloCtrl&&
&&&&Say&hello&to:&&input&type=&text&&ng-model=&name&&&br&
&&&&&h1&Hello,&{{name}}!&/h1&
&&&&&h2&{{getName()}}&/h2&
&/html&运行的效果图如下：&&在body上绑定ng-app代表当前页面body元素收到angular控制，ng-controller绑定的元素受到angular的控制器HelloCtrl控制，$scope是一个全局对象，可以再页面上直接访问$scope的属性和方法。注意：上面这种写法只适用于angular版本低于1.3的时候，高于1.3的话，需要写成下面这样：&html&
&&&&&script&src=&///angular.js/1.3.17/angular.js&&&/script&
&&&&&script&type=&text/javascript&&
&&&&angular.module('app',[]).controller('HelloCtrl',function&($scope)&{
&&&&&&&&&&&&$scope.name&=&'World';
&&&&&&&&&&&&$scope.getName&=&function()&{
&&&&&&&&&&&&&&&&return&$scope.
&&&&&&&&&&&&};
&&&&&&&&})
&&&&&/script&
&body&ng-app&=&'app'&
&div&ng-controller=&HelloCtrl&&
&&&&Say&hello&to:&&input&type=&text&&ng-model=&name&&&br&
&&&&&h1&Hello,&{{name}}!&/h1&
&&&&&h2&{{getName()}}&/h2&
&/html&效果是等同的，只是多定义了一个模块app，更符合MVC的思想，建议采用下面这种方式。上一页：没有了 &&&&&下一页：相关内容收藏，451 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
先贴上代码：
controller:
.controller('FoldController', ['$scope', function ($scope){
$scope.isFolded =
标志是否折叠的状态
directive:
.directive('fold', function () {
restrict: 'A',
link: function (scope, element, attrs) {
// 只要点击其中的内容，让其折叠回去
element.on('click',function () {
scope.isFolded =
element.slideUp();
console.log(scope);
// 折叠的函数
function toggleFold(isFold) {
isFold ? element.slideUp() : element.slideDown();
// 监视是否折叠，即controller里定义的标志
scope.$watch(attrs.fold, function (isFold) {
toggleFold(isFold);
&nav class="navbar navbar-default" ng-controller="FoldController"&
&div class="container"&
&div class="navbar-header"&
&button type="button" class="navbar-toggle"
ng-click="isFolded=!isFolded"&
主要是这里
点击后toggle折叠的标志
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&a href="#/index" class="navbar-brand"&Index {{isFolded}}&/a&
// 为了方便测试，我将折叠表示显示出来
// 这里用directive控制
&div class="navbar-collapse collapse" fold="isFolded"&
&ul class="navbar-nav nav"&
&li class="active"&&a href="#/index"&index&/a&&/li&
&li&&a href="#/about"&about&/a&&/li&
&li&&a href="#/contact"&contact&/a&&/li&
&li&&a href="#/chatroom"&chatroom&/a&&/li&
前提交代完毕，我的期望是：
在未折叠时通过点击折叠区域，让其折叠回去，同时改变scope.isFold折叠标志，让其恢复原状，
其中会有一个bug，就是我修改了scope.isFold的值，并且验证了scope的值是被改变的，但是页面上依然是原值，即双向绑定失效，看下图
从图上的显示看，折叠区域已经被折叠，下面输出的scope.isFold也是正常的true，但是页面顶端上的值却是false，我验证过dom元素，是对了，验证过controller和directive里的scope.isFold的值，是对了，唯独这个页面就是对的，这个情况发生的也没有规律，挺郁闷的，谁来给看看。。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
6月4日 回答
在你的事件处理函数中 加入 $scope.$apply
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
6月4日 回答
&div class="navbar-collapse collapse" fold ng-model="isFolded"&
&ul class="navbar-nav nav"&
&li class="active"&&a href="#/index"&index&/a&&/li&
&li&&a href="#/about"&about&/a&&/li&
&li&&a href="#/contact"&contact&/a&&/li&
&li&&a href="#/chatroom"&chatroom&/a&&/li&
.directive('fold', function () {
require: 'ngModel',
restrict: 'A',
link: function (scope, element, attrs) {
// 只要点击其中的内容，让其折叠回去
element.on('click',function () {
scope.isFolded =
element.slideUp();
scope.$digest();
console.log(scope);
scope.$watch('isFolded', function (isFold) {
toggleFold(isFold);
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
6月4日 回答
解决方案是：
在操作完dom元素，修改scope上的属性值后，scope.$apply更新视图
element.on('click', function() {
pe.isFolded = !scope.isF
element.slideUp();
scope.$apply();
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
6月7日 回答
其实很多人有个误区， 就是还在link函数中使用 elemnet.on 这种事件监听，
为什么不用ngClick然后在link中写一个scope.click函数呢？
除非你用的第三方的jQuery插件
同步到新浪微博
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
举报理由：
推广（招聘、广告、SEO 等）方面的内容
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复（请编辑该提问指向已有相同问题）
不友善内容
答非所问，不符合答题要求
其他原因（请补充说明）
补充说明：
扫扫下载 App
SegmentFault
一起探索更多未知jquery/js如何单独给多个相同class的div绑定动作？现在错将mouthover绑定在所有class相同的div上了_百度知道
jquery/js如何单独给多个相同class的div绑定动作？现在错将mouthover绑定在所有class相同的div上了
我给class相同的div绑定了mouthover事件的fadein方法，结果导致移到任何一个class相同的div上所有的div会同时触发fadein。如何解决？
提问者采纳
你有N个class='aa'
的DIV标签就这样写$('.aa').hover(function(){
$(this).fadeIn();}) 利用this指针
提问者评价
来自团队：
其他类似问题
为您推荐：
jquery的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁jquery 动态生成的div 不能绑定事件
[问题点数：40分，结帖人lenovo9992]
jquery 动态生成的div 不能绑定事件
[问题点数：40分，结帖人lenovo9992]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关推荐：
2014年7月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。