angularJS 单击ng-click和双击ng-dblclick嵌套或者出现在同一元素避免事件互相干扰方法

最新推荐文章于 2021-03-15 17:16:02 发布

Altaba

最新推荐文章于 2021-03-15 17:16:02 发布

阅读量5.7k

点赞数 1

分类专栏： JavaScript 文章标签：前端开发 angularjs JS javascript dom

本文链接：https://blog.csdn.net/Altaba/article/details/78604838

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

欢迎来到Altaba的博客 2017年11月22日

在实际开发中遇到这样一问题：项目是基于angular开发的，表格中tr绑定了单击跳转事件 tr中每个td绑定了双击事件，当你想通过双击去操作td时候，发现总是会触发外部的双击事件，通过查阅资料，测试各种解决办法，一下代码为本人测试，拓展了同一元素上同时绑定单击和双击事件怎么排除互相干扰。欢迎遇到同样问题的童鞋参考解决

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: #ccc;
            margin: 100px;
        }

        .container{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body ng-controller="myCtrl">
<h3>采用自定义指令实现 获取双击间隔时间控制单价双击事件</h3>
<div class="box"  sglclick="funwang($event)">
    <div class="container"
         ng-dblclick="funwang2($event)"></div>
</div>

<h3>采用自定义指令实现 获取双击间隔时间控制单价双击事件</h3>
<div class="box"  ng-click="$evalAsync(funwang($event))">
    <div class="container"
         ng-dblclick="funwang2($event)">
    </div>
</div>

<h3>同一个元素上面既有单击事件又有双击事件 采用$evalAsync 双击单击同时触发 未能生效</h3>
<div class="box">
    <div class="container"
         ng-click="$evalAsync(funwang3($event))"
         ng-dblclick="funwang2($event)">
    </div>
</div>

<h3>采用$evalAsync 实现子元素单击，父元素双击 未能生效</h3>
<div class="box" ng-click="$evalAsync(funwang($event))">
    <div class="container"
         ng-dblclick="funwang2($event)">
    </div>
</div>

<div class="box">
    <!--ng-click="$evalAsync(funwang($event))"-->
    <!-- sglclick="funwang($event)"-->
    <!--ng-click="funwang($event)"-->
    <div class="container"
         ng-dblclick="funwang2($event)"
         ng-click="$evalAsync(funwang3($event))">
    </div>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope,hexafy) {
        $scope.name = "John Doe";

        $scope.funwang = function ($event) {
            alert('我触发了父元素单击事件')
        };

        $scope.funwang2 = function ($event) {
            alert('我触发了子元素双击事件')
            $event.stopPropagation();//阻止冒泡
        };

        $scope.funwang3 = function ($event) {
            alert('我触发了子元素单击事件')
            //$event.stopPropagation();//阻止冒泡
        };

    })

    app.service('hexafy', function() {
        this.myFunc = function (x) {
            return x.toString(16);
        }
    })

    app.directive('sglclick', ['$parse', function($parse) {
        return {
            restrict: 'A',
            link: function(scope, element, attr) {
                var fn = $parse(attr['sglclick']);
                var delay = 400, clicks = 0, timer = null;
                element.on('click', function (event) {
                    clicks++;  //count clicks
                    if(clicks === 1) {
                        timer = setTimeout(function() {
                            scope.$apply(function () {
                                fn(scope, { $event: event });
                            });
                            clicks = 0;          
                        }, delay);
                    } else {
                        clearTimeout(timer);   
                        clicks = 0;         
                    }
                });
            }
        };
    }])
</script>
</body>
</html>