html 传参阻止冒泡,angular阻止冒泡事件

落日映苍穹つ 2022-10-10 01:30 178阅读 0赞

当元素多层嵌套的时候，每层都有点击事件，它就会发生冒泡，一层一层的触发，但有时候我们只想触发某一层，不想让其他层的事件触发，这就需要阻止冒泡事件了。

以angular项目为例，我们都知道angularJS中的执行方法都会自带一个$event，这个$event就是当前事件的对象，通过它来阻止冒泡。

在html中写一个ng-click事件：

注意给方法传递参数 $event.

在对应的controller中，添加阻止冒泡：

触发事件，传参数 $event

在事件中添加 $event.stopPropagation(); 阻止冒泡。

self.test = function($event)\{

$('\#showMenus').css('display', 'block');

$event.stopPropagation();

\}

更官方的示例：

查看angular的官方api文档，可以看出，angular对ng事件(例如：ng-click、ng-blur、ng-dblclick等等)，添加了一个$event变量。

其实无论是js还是jq抑或是angular，阻止冒泡的关键都在于抓取event/$event

angular 中ngEventDirs.js:

var ngEventDirectives = \{\};

forEach(

'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),

function(name) \{

var directiveName = directiveNormalize('ng-' + name);

ngEventDirectives\[directiveName\] = \['$parse', function($parse) \{

return \{

compile: function($element, attr) \{

var fn = $parse(attr\[directiveName\]);

return function(scope, element, attr) \{

element.on(lowercase(name), function(event) \{

scope.$apply(function() \{

fn(scope, \{$event:event\});

\});

\});

\};

\}

\};

\}\];

\}

);

在上边代码我们可以得到两个信息：

Angular支持的event：click 、dblclick 、mousedown 、mouseup、 mouseover 、mouseout 、mousemove、 mouseenter、 mouseleave、 keydown、 keyup、 keypress 、submit、 focus、 blur、 copy 、cut 、paste

Angular在执行事件函数时候传入了一个名叫 $event的常量，该常量即代表当前event对象，如果你在Angular之前引入了jQuery那么这就是jQuery的event.

那么我们可以利用event的stopPropagation来阻止事件的冒泡

发表评论取消回复

表情：

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

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

相关阅读

相关如何阻止事件冒泡

在页面开发中，我们使用JS添加事件后，默认情况事件会向上冒泡的。 <body> <div class="parent"> <input type

秒速五厘米/ 2022年11月19日 07:42/ 0 赞/ 228 阅读

相关 html 传参阻止冒泡,angular阻止冒泡事件

当元素多层嵌套的时候，每层都有点击事件，它就会发生冒泡，一层一层的触发，但有时候我们只想触发某一层，不想让其他层的事件触发，这就需要阻止冒泡事件了。以angular项目为例

落日映苍穹つ/ 2022年10月10日 01:30/ 0 赞/ 179 阅读

相关 Js 冒泡事件阻止

出于对作者的尊重和感谢，原文地址为 http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html

Bertha 。/ 2022年09月24日 00:29/ 0 赞/ 247 阅读

相关 js阻止事件冒泡

function stopHandler(event){ window.event?window.event.cancelBubble=true:eve

古城微笑少年丶/ 2022年07月13日 00:48/ 0 赞/ 266 阅读

相关阻止事件冒泡

事件的冒泡（Bubble） \- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发 \- 在开发中大部分情况冒泡都是有用的,如果

红太狼/ 2022年06月01日 07:18/ 0 赞/ 315 阅读

相关 vue阻止事件冒泡

vue事件修饰 `.stop` `.prevent` `.capture` `.self` `.once` ``

墨蓝/ 2022年05月28日 12:25/ 0 赞/ 264 阅读

相关 NavMenu 阻止事件冒泡

当我点击首页的按钮时绝对定位到左上角，点击页面其他位置是关闭菜单但当我点击了菜单上的选项时，菜单也会触发到关闭菜单的事件 <template>

忘是亡心i/ 2022年05月14日 11:08/ 0 赞/ 277 阅读

相关 vue 阻止事件冒泡

事件修饰符在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。尽管我们可以

墨蓝/ 2022年04月05日 12:11/ 0 赞/ 307 阅读

相关 React阻止事件冒泡

<div className={styles.hezi} onClick={e => this.handleClick(e)}> handleClick=e

比眉伴天荒/ 2021年09月17日 20:32/ 0 赞/ 416 阅读

相关 mpvue - 阻止事件冒泡

前言 mpvue中元素嵌套都有点击触发事件，那点击里面的元素也会触发容器的点击事件。解决方法在`@click`加上`stop`属性可以阻止冒

比眉伴天荒/ 2021年07月26日 23:50/ 0 赞/ 448 阅读