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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。