阻止事件冒泡,阻止默认事件

事件冒泡与默认行为
本文介绍了JavaScript中事件冒泡的概念及其如何工作,并演示了如何使用e.stopPropagation()来阻止事件冒泡。此外,还展示了三种不同方式阻止链接的默认行为。

阻止事件冒泡

html代码:

<table>
  <tr>
    <td><span>冒泡事件测试</span></td>
  </tr>
</table>

js代码:

$('table').click(function(){
    alert('table');
});
$('td').click(function(){
    alert('td');
});
$('span').click(function(e){
    alert('span');
    e.stopPropagation(); //阻止事件冒泡
});

如果js中不加“ e.stopPropagation()”,那输出结果就依次为span -> td -> table。这就叫事件冒泡。就是从下到上,从里到外,事件依次触发。


阻止默认事件-1

html代码:

<a class="a1" href="#">阻止默认事件1</a>

js代码:

$('.a1').click(function(e){
    alert('默认事件被阻止了');
    e.preventDefault(); //阻止默认事件
});

 


 

阻止默认事件-2

<a class="a2" href="javascript:void(0);" onClick="alert('a2被点击了');">阻止默认事件2</a>

 


 

阻止默认事件-3

<a class="a3" href="javascript:void(alert('a3被点击了'));">阻止默认事件3</a>

 

转载于:https://www.cnblogs.com/shirliey/p/4778964.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值