JS阻止事件冒泡,js如何阻止事件冒泡和默认事件

JS阻止事件冒泡,js如何阻止事件冒泡和默认事件,JS阻止事件冒泡的方法详解

本文中,边肖整理了JS如何防止事件冒泡的相关知识点,有需要的朋友可以借鉴。

% @ Page Language=' c# ' AutoEventWireup=' true ' CodeFile=' default 5 . aspx . cs ' inherits=' default 5 ' %

!' DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD '

html xmlns=' http://www . w3 . org/1999/XHTML '

head runat='server '

TitlePorschev - Jquery事件冒泡/title

script src=' jquery-1 . 3 . 2-vs doc . js ' type=' text/JavaScript '/script

/头

身体

表单id='form1' runat='server '

Div id='divOne' onclick='alert('我是最外层');'

Div id='divTwo' onclick='alert('我是中间层!')'

a=' HR _ three ' href=' http://www . Baidu . com ' rel=' external no follow ' rel=' external no follow ' MCE _ href=' 3358 www . Baidu . com ' rel=' external no follow ' rel=' external no follow ' onc)'点击我/a。

/div

/div

/表单

/body

/html

例如,上面这一页,

分为三层:divOne为外层,divTwo为中间层,hr_three为最内层;

它们都有自己的click事件,最里面的A标签也有href属性。

运行页面,点击“点击我”,依次弹出:我是最内层——我是中间层——我是最外层。

——然后链接百度。

这就是事件冒泡。本来我只点了ID为hr_three的标签,但是我确实进行了三次预警操作。

事件冒泡流程(用标签ID表示):HR _ three-divtwo-divone。从最里层泡到最外层。

怎么阻止?

1 . event . stop propagation();

脚本类型='文本/javascript '

$(function() {

$('#hr_three ')。单击(功能(事件){

event . stop propagation();

});

});

脚本

再点击“点击我”,会弹出:我是最里层,然后链接百度。

2 .返回false

如果将以下代码添加到标题中

脚本类型='文本/javascript '

$(function() {

$('#hr_three ')。单击(功能(事件){

返回false

});

});

脚本

再点击“点击我”,会弹出:我是最里层,但不会链接百度页面。

可以看出:

1.event.stopPropagation();

在事件处理过程中,事件被阻止冒泡,但默认行为没有被阻止(它执行超链接的跳转)。

2.return false;

在事件处理过程中,它防止事件冒泡和默认行为(例如,它只是不执行超链接跳转)。

还有一种与冒泡有关:

3.event.preventDefault();

如果你把它放在head A选项卡的click事件中,点击“点击我”。

会依次弹出:我是最内层——我是中间层——我是最外层,但是最后没有跳到百度。

它的作用是:在事件处理过程中,不阻塞事件冒泡,而是阻塞默认行为(只执行所有的子弹框,不执行超链接跳转)。

以上提到的知识点就这些了。谢谢你的支持。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: