jquery使用過(guò)程中阻止事件起泡實(shí)例??

1、通過(guò)返回false來(lái)取消默認(rèn)的行為并阻止事件起泡。

jQuery 代碼:

$("form").bind("submit", function() { return false; })

?

2、通過(guò)使用 preventDefault() 方法只取消默認(rèn)的行為。

jQuery 代碼:

$("form").bind("submit", function(event){
? event.preventDefault();
});

?

3、通過(guò)使用 stopPropagation() 方法只阻止一個(gè)事件起泡。

jQuery 代碼:

$("form").bind("submit", function(event){
? event.stopPropagation();
});

?

?

?

關(guān)于js事件起泡的驗(yàn)證

今天這個(gè)問(wèn)題主要涉及到幾個(gè)關(guān)鍵詞：對(duì)象，觸發(fā)事件，捕獲事件，執(zhí)行處理、起泡。這其實(shí)就是整個(gè)js執(zhí)行的過(guò)程。其中冒泡這個(gè)過(guò)程很有意思。其實(shí)就像是一杯水，但是這杯水是分層次的，最底下是當(dāng)前觸發(fā)事件的對(duì)象。然后越往上范圍越大，最頂層肯定是window，倒數(shù)第二層是document。氣泡在上浮過(guò)程中會(huì)判斷當(dāng)前所到達(dá)的層有沒(méi)有綁定事件處理方法。有話就執(zhí)行相應(yīng)的處理。沒(méi)有的話就繼續(xù)起泡。直到到達(dá)最頂層的window窗口層。我們可以在任何一層做相應(yīng)的處理以阻止事件繼續(xù)起泡。方法就是調(diào)用事件對(duì)象的阻止起泡的方法。event.stopPropagation();下面是寫的一個(gè)驗(yàn)證js事件起泡的過(guò)程方法。

<script type="text/javascript">

??? $(document).ready(function(){

??????? $('.one').click(function(e){

??????????? alert('one');

?? ?????});

??????? $('.two').click(function(e){

??????????? alert('two');

??????? });

??????? $('.three').click(function(e){

??????????? alert('three');

?????????? //阻止起泡取消下面的注釋

?????????? // e.stopPropagation();

??????? });

??? });

</script>

<div class="one" style="width:200px;height:200px;background:green;">

one

??? <div class="two" style="width:150px;height:150px;background:yellow;">

??? two

??????? <div class="three">

??????????? three

??????? </div>

??? </div>

</div>

轉(zhuǎn)載于:https://www.cnblogs.com/windrainpy/archive/2011/08/09/2131651.html

總結(jié)

以上是生活随笔為你收集整理的用jquery阻止事件起泡的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。