如何取消JS事件的派发——stopPropagation()

冷不防 2022-09-21 05:40 203阅读 0赞

使用event.stopPropagation();可阻止事件的派发。  
个人浅显理解**派发**为 本次操作后面所能触发的事件将不再触发。  
**说明**:  
**stopPropagation()**方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

**示例**：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
    
    <div ng-app="myApp" ng-controller="myCtrl">
        <div ng-click="parentClick();">
            <div>父</div> <Br/><Br/><Br/><Br/>   
            <div ng-click="childClick();">
                <div>子</div> <Br/><Br/><Br/><Br/>
                <div ng-click="click();">孙</div>
            </div>
        </div>
    </div>
    
    <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.parentClick = function(){ alert("父") event.stopPropagation(); } $scope.childClick = function(){ alert("子") } $scope.click = function(){ alert("孙") } }); </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关事件冒泡、事件捕获、取消冒泡、取消默认事件

事件冒泡：只要结构上，非视觉上嵌套关系的元素，或存在事件冒泡的功能，即同一事件，自子元素冒泡到父元素。如：当点击子元素content时，会向上依次执行（自底向

冷不防/ 2023年03月13日 05:54/ 0 赞/ 28 阅读

相关简单解析js的事件冒泡及如何取消事件冒泡

简单解析js的事件冒泡 1.什么是事件冒泡？以click点击事件为例。假如我们有一个多层结构标签。如下图，是4个div嵌套。每个div都有点击的监听事件，分别aler

朱雀/ 2023年02月14日 13:15/ 0 赞/ 209 阅读

相关 android添加input事件,android framework层input事件接收和派发

input序列图 ![7d67cee56197b9c896e01109212ada7c.png][] 前面是启动activity时，view的添加过程。在view添加过程中

秒速五厘米/ 2022年10月05日 07:56/ 0 赞/ 490 阅读

相关 Handler的消息派发

通常来讲，使用handler都是继承handler重写handleMessage()方法来处理事件。但是handler可不只有这种方式能够处理事件。handler有三种

矫情吗；*/ 2022年09月24日 10:29/ 0 赞/ 149 阅读

相关如何取消JS事件的派发——stopPropagation()

使用event.stopPropagation();可阻止事件的派发。个人浅显理解派发为本次操作后面所能触发的事件将不再触发。说明: stopPropagat

冷不防/ 2022年09月21日 05:40/ 0 赞/ 204 阅读

相关 AngularJS阻止事件冒泡$event.stopPropagation()

一、在AngularJs中阻止事件冒泡方式 <span ng-click="func();$event.stopPropagation();"></span>

小咪咪/ 2022年07月12日 04:25/ 0 赞/ 237 阅读

相关 AngularJS阻止事件冒泡$event.stopPropagation()

一、在AngularJs中阻止事件冒泡方式 <span ng-click="func();$event.stopPropagation();"></span>

朱雀/ 2022年07月12日 04:25/ 0 赞/ 226 阅读

相关触摸事件从ViewRootImpl到DecorView的派发过程

ViewRootImpl & ViewGroup & View 触摸事件派发机制源码分析 Android 6.0 & API Level 23 Github:

逃离我推掉我的手/ 2022年03月15日 10:00/ 0 赞/ 164 阅读

相关 js 取消冒泡和阻止默认事件

取消冒泡 function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.sto

雨点打透心脏的1/2处/ 2021年10月23日 22:42/ 0 赞/ 412 阅读

相关事件冒泡 bubbles cancelBubble stopPropagation() stopImmediatePropagation() 区别

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件冒

深碍√TFBOYSˉ_/ 2021年09月07日 06:22/ 0 赞/ 301 阅读