jquery使用過程中阻止事件起泡實例??

1、通過返回false來取消默認的行為并阻止事件起泡。

jQuery 代碼:

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

?

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

jQuery 代碼:

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

?

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

jQuery 代碼:

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

?

?

?

關于js事件起泡的驗證

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

<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>

轉載于:https://www.cnblogs.com/windrainpy/archive/2011/08/09/2131651.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。