Angular解决IE和Firefox下button内部元素ng-click事件被屏蔽

最新推荐文章于 2020-11-04 21:42:59 发布

justforuse

最新推荐文章于 2020-11-04 21:42:59 发布

阅读量3.3k

点赞数

分类专栏： AngularJS 文章标签： angular firefox ie ng-click button

本文链接：https://blog.csdn.net/u014291497/article/details/52496154

版权

AngularJS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

如果我们在button元素内部有其它的子元素并且绑定点击事件，比如：

这里写图片描述

而我们的代码是这样的：

<body ng-controller="ctrl">
    <script>
        angular.module("app", [])
            .controller("ctrl", function($scope){
                $scope.sayButton = function(e){
                    alert('button');
                };
                $scope.saySpan = function(e){
                    alert('span');
                };
            })
    </script>
    <button class="btn btn-default btn lg" ng-click="sayButton($event)">
        Button
        <span class="star glyphicon glyphicon-star" ng-click="saySpan($event)"></span>
    </button>

</body>

这种情况下 chrome下点击span元素，会提示两个，即’span’和’button’，而对于IE则只提示’button’。（点击button均只提示’button’）

解决IE的处理点击事件错误的方式就是找“别的元素”来代替”button”元素，”狸猫换太子“。所以代码就变成了这样：

<div class="btn btn-default btn lg" ng-click="sayButton($event)">
    Button
    <span class="star glyphicon glyphicon-star" ng-click="saySpan($event)"></span>
</div>

这样结果对于chrome和IE结果都是一样的，点击span元素先提示’span’后提示’button’，点击button元素只提示’button’。

还有个问题就是阻止事件冒泡了，解决方法只需要在函数最后添加e.stopPropagation(); 这句代码，所以最终我们的结果就是：

<body ng-controller="ctrl">
    <script>
        angular.module("app", [])
            .controller("ctrl", function($scope){
                $scope.sayButton = function(e){
                    alert('button');
                    e.stopPropagation();
                };
                $scope.saySpan = function(e){
                    alert('span');
                    e.stopPropagation();
                };
            })
    </script>
    <div class="btn btn-default btn lg" ng-click="sayButton($event)">
        Button
        <span class="star glyphicon glyphicon-star" ng-click="saySpan($event)"></span>
    </div>

</body>

效果图：（IE下）
这里写图片描述

Chrome下：

这里写图片描述

博客写到这FireFox也终于打开了，顺便看看效果：
FireFox下：

这里写图片描述

源代码：https://github.com/justforuse/Pro_Angular-demo/tree/master/button-inner

此文档的作者：justforuse
Github Pages：justforuse

justforuse

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular解决IE和Firefox下button内部元素ng-click事件被屏蔽

如果我们在button元素内部有其它的子元素并且绑定点击事件，比如：而我们的代码是这样的：<body ng-controller="ctrl"> <script> angular.module("app", []) .controller("ctrl", function($scope){ $scope.sayButto
复制链接

扫一扫