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

阻止事件冒泡

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>