AngularJs-单击按钮事件中的冒泡现象

最新推荐文章于 2023-05-05 13:29:28 发布

Mars-xq

最新推荐文章于 2023-05-05 13:29:28 发布

阅读量1.5k

点赞数

分类专栏： angularjs angularjs

本文链接：https://blog.csdn.net/sinat_31057219/article/details/61688374

版权

angularjs 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

angularjs

37 篇文章 0 订阅

订阅专栏

$event.stopPropagation()阻止事件运行，防止冒泡传递事件

用法：

ng-click="doSomeSth();$event.stopPropagation();

示例一：

Stop Propagation的情况下点击button你将会看见两条log记录：button和它的容器，否则只会出现button的log信息。

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
</head>
<body ng-controller="demo as d">
<div ng-click="d.click('parent',$event)">
    given some text for click
    <hr>
    <input type="checkbox" ng-model="d.stopPropagation"/>Stop Propagation ?
    <hr>
    <button type="button" ng-click="d.click('button2222222',$event)">button</button>
    <hr>
    <button type="button" ng-click="d.click('button1111111',$event);$event.stopPropagation();">button</button>
   <!-- <button type="button" ng-click="doSomeSth();$event.stopPropagation();">button</button>-->
</div>
<!--
Stop Propagation的情况下点击button你将会看见两条log记录：button和它的容器，
否则只会出现button的log信息。-->
<script>
    angular.module("app", [])
        .controller("demo", [function () {
            var vm = this;
            vm.click = function (name, $event) {
                console.log(name + " -----called");
                if (vm.stopPropagation) {
                    $event.stopPropagation();
                }
            };
            return vm;
        }]);
</script>
</body>
</html>

示例二：

<!DOCTYPE html>
<html ng-app="a10_7">
<head>
    <title>解决点击按钮事件中的冒泡现象</title>
    <script src="../Script/angular.min.js"></script>
    <style type="text/css">
        .frame {
            padding: 5px 8px;
            margin: 0px;
            font-size: 12px;
            width: 320px;
            background-color: #eee;
        }

        .frame div {
            margin: 10px 0px;
        }
    </style>
</head>
<body>
<div ng-controller="c10_7 as o" class="frame">
    <div ng-click="o.click('父级',$event)">
        在按钮的单击事件中，阻止冒泡现象
        <br/>
        <input type="checkbox" ng-click="o.change($event)" ng-model="o.stopPropagation"/>是否阻止冒泡 ?
        <br/><br/>
        <button type="button" ng-click="o.click('按钮',$event)">点击我</button>
    </div>
</div>
<script type="text/javascript">
    angular.module('a10_7', [])
        .controller('c10_7', function ($scope) {
            var obj = this;
            /*this指的是controller本身*/

            obj.click = function (name, $event) {
            /*参数：触发事件的元素名称，事件*/
                console.log(name + "被触发");
                //按钮---->父级：冒泡事件
                if (obj.stopPropagation) {
                    $event.stopPropagation();
                    /*阻止事件的冒泡*/
                }
            };

            obj.change = function ($event) {
                $event.stopPropagation();
                /*阻止事件的冒泡*/
            };
            return obj;
        });
</script>
</body>
</html>

参考：

《angularjs实战》

Mars-xq

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJs-单击按钮事件中的冒泡现象

$event.stopPropagation()阻止事件运行，防止冒泡传递事件用法：ng-click="doSomeSth();$event.stopPropagation();示例一：Stop Propagation的情况下点击button你将会看见两条log记录：button和它的容器，否则只会出现button的log信息。<!DOCTYPE html><html lang="en" ng-a
复制链接

扫一扫

专栏目录