首页 > 代码库 > outsideClick 功能，探索

outsideClick 功能，探索

2024-11-01 17:03:02   210人阅读

　　最近项目中新增了一个功能，需求是一个下拉列表，但是激活元素是 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 后判断是否点击的是目标元素，再进行相应操作。

 

　　遗留个小问题：点击滚动条居然不算是点击目标元素 @_@ ?

outsideClick 功能，探索


联系
我们