outsideClick 功能，探索
Posted 名字不好起啊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了outsideClick 功能，探索相关的知识，希望对你有一定的参考价值。
最近项目中新增了一个功能，需求是一个下拉列表，但是激活元素是 input 标签，对于 uib-dropdown 指令也不难，只是将 button 换成 input 加上 uib-dropdown-toggle 属性标记即可，这不难。
然而，测试提出了另一个需求，input 框可点击，并且下拉框不闪动，意思就是说点击 input 下拉框不要在展开关闭中切换。这个问题直接就难住我了，因为 uib-dropdown-toggle 属性，会导致点击一次激活属性，就改变一次下拉框的开闭状态。
而还有一种方法，将 auto-close 设置成 disabled ，同时 uib-dropdown 同级属性加上 is-open 属性来自己控制下拉框的开合，这样做是实现了测试的需求，但同时引出了另一个问题：点击外部不会关闭，因为之前 auto-close 设置的是 outsideClick ，点击除下拉框外的元素都将关闭下拉框。
因为时间较急，也没仔细看过这个 outsideClick 的实现原理，于是积极找各种方法，寻求新的插件来实现需求，偶然看到了 select2 插件的对 input 下拉框的查询，它巧妙的将 input 放入了下拉框中，这就不会存在点击 激活元素的事件了，于是跟同事商量，改成了这种下拉 input 的实现，插件并没有改变。
现在功能做完，回想起来这么个事，先想出来个 outsideClick 的实现，以后万一有用呢：
<!DOCTYPE html> <html ng-app=‘myApp‘> <head> <meta charset=‘utf-8‘> <script src=‘angular.js‘></script> <script src=‘jquery-1.11.3.js‘></script> <style> .div1 { border: 1px solid #ddd; width: 200px; height: 200px; margin-left: 40%; margin-top: 100px; display:inline-block; overflow-x:scroll; } p { text-align: center; } </style> </head> <body> <div ng-controller=‘myCtrl‘> <div class=‘div1‘ ng-click="eleClickFnc()">ppppppppppppppppppppppppppppppppppp
ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp</div> <p>{{message}}</p> </div> <script> angular.module("myApp",[]) .controller("myCtrl",function($scope, $document){ $scope.message = ‘please click anywhere‘; $scope.isELeClick = false; $scope.eleClickFnc = function () { $scope.isELeClick = true; $scope.message = ‘ele clicked‘; console.log(‘ele‘) } $document.bind(‘click‘, function () { if(!$scope.isELeClick) { $scope.$apply(function () { $scope.message = ‘body click‘; }) } $scope.isELeClick = false; console.log(‘body‘) }) }) </script> </body> </html>
主要思路就是监听点击事件啦：
1、元素自己的事件，可以通过一个开关来控制；
2、document 的监听，点击元素肯定是先触发的元素事件，这样先改变开关状态，触发到 document 后判断是否点击的是目标元素，再进行相应操作。
遗留个小问题：点击滚动条居然不算是点击目标元素 @[email protected] ?
以上是关于outsideClick 功能，探索的主要内容，如果未能解决你的问题，请参考以下文章