ng-change事件中如何获取$event和如何在子元素事件中阻止调用父级元素事件（阻止事件冒泡）

时间 2019-11-10

标签 change 事件如何获取 event 元素阻止调用冒泡栏目应用数学繁體版

原文原文链接

闲聊：

今天小颖要实现一个当改变了select内容后弹出一个弹框，而且点击select父元素使得弹框消失，这就得用到阻止事件的冒泡了：$event.stopPropagation()，然而小颖发现，在ng-change事件中是获取不到$event的，因此就百度了下嘻嘻，最后使用 ng-click +$watch 搞定啦，下面就来看看小颖是怎么解决问题的呢。哈哈哈哈哈哈javascript

还和往常同样咱们先来看看页面效果：css

解释：html

第一个弹框由于是给select绑定的 ng-change ，小颖干脆就没作弹框消失处理，嘻嘻，java

第二个就是为了是实现当select内容改变弹框出现，点击其父级弹框消失的处理。app

不知道你们发现没其实两个都是在select的值发现变化后，弹框才出来的，虽然第spa

二个select绑定的是 ng-click 而不是 ng-change 。code

html+css 代码：

<!DOCTYPE html>
<html ng-app="test">

<head>
    <title></title>
    <style type="text/css">
    body {
        position: relative;
    }

    .ceshi {
        width: 400px;
        margin: 0 auto;
    }

    .select-template {
        padding: 30px 10px;
    }

    .select-btn {
        height: 34px;
        padding: 6px;
        color: #666;
        border-color: #e4e4e4;
    }

    div#linkBox1,
    div#linkBox2 {
        font-family: arial;
        font-size: 12px;
        text-align: left;
        border: 1px solid #AAA;
        background: #FFF none repeat scroll 0% 0%;
        z-index: 9999;
        visibility: hidden;
        position: absolute;
        padding: 0px;
        border-radius: 3px;
        white-space: nowrap;
    }

    .intcaselink {
        cursor: pointer;
        padding: 3px 8px 3px 8px;
        margin: 5px;
        background: #EEE none repeat scroll 0% 0%;
        border: 1px solid #AAA;
        border-radius: 3px;
    }
    </style>
</head>

<body ng-controller="main">
    <div class="ceshi">
        <div class="select-template">
            <select class="select-btn" ng-model="selectAList.value" ng-change="selectChangeFun1()">
                <option value="-1">请选择</option>
                <option value="{{item.id}}" ng-repeat="item in selectAList.dataList track by $index">{{item.name}}</option>
            </select>
        </div>
        <div style="background-color: pink;" class="select-template" ng-click="hiddenLinkBox2()">
            <select class="select-btn" ng-model="selectBList.value" ng-click="selectClickFun1($event)">
                <option value="-1">请选择</option>
                <option value="{{item.id}}" ng-repeat="item in selectBList.dataList track by $index">{{item.name}}</option>
            </select>
        </div>
        <div ng-show="showLinkBox1" class="intcases" id="linkBox1" style="    top: 35px;left: 600px;visibility: inherit; z-index: 1003;">
            <div class="intcaselink">APP推送(连接)</div>
            <div class="intcaselink">APP推送(专题)</div>
            <div class="intcaselink">APP推送(活动)</div>
            <div class="intcaselink">APP推送(商品)</div>
        </div>
        <div ng-show="showLinkBox2" class="intcases" id="linkBox2" style="    top: 135px;left: 600px;visibility: inherit; z-index: 1003;">
            <div class="intcaselink">APP推送(连接)</div>
            <div class="intcaselink">APP推送(专题)</div>
            <div class="intcaselink">APP推送(活动)</div>
            <div class="intcaselink">APP推送(商品)</div>
        </div>
    </div>
</body>

</html>

js代码：

    <script src="js/angular.js" charset="utf-8"></script>
    <script type="text/javascript">
    let mod = angular.module('test', []);
    mod.controller('main', function($scope) {
        $scope.selectAList = {
            value: '-1',
            dataList: [{
                id: '1',
                name: 'aaa'
            }, {
                id: '2',
                name: 'bbb'
            }, {
                id: '3',
                name: 'ccc'
            }]
        };
        $scope.selectBList = {
            value: '-1',
            dataList: [{
                id: '1',
                name: '豆豆'
            }, {
                id: '2',
                name: '仔仔'
            }, {
                id: '3',
                name: '琪琪'
            }]
        };
        $scope.showLinkBox1 = false;
        $scope.showLinkBox2 = false;
        $scope.selectChangeFun1 = function() {
            $scope.showLinkBox1 = true;
        }
        // 隐藏LinkBox2
        $scope.hiddenLinkBox2 = function() {
            $scope.showLinkBox2 = false;
        }
        $scope.selectClickFun1 = function($event) {
            $event.stopPropagation();
        }
        $scope.$watch("selectBList.value", function(newVal, old) {
            if (newVal == old) {
                return;
            }
            $scope.showLinkBox2 = true; //app推送弹框
        })
    });
    </script>