JQuery中如何阻止冒泡事件

2019-12-11 09:09:34

JQuery中阻止事件冒泡，可以使用下面三種形式：

1）event.stopPropagation(); // 阻止冒泡

2）event.preventDefault(); // 阻止預設行為 ( 用於阻止表單提交。不阻止事件冒泡 )

3）return false; // 阻止程式碼繼續執行，包含冒泡阻止

新建資料夾「bubbling」，在其內部新增「Home.html」頁面，並建立「ContentJSjquery-1.11.0.min.js」。形式如下：

bubbling

-- Content

-- JS

-- jquery-1.11.0.min.js

-- Home

在Home頁面中新增Jquery檔案的參照，同時，在最後新增測試參照是否成功，參照新增成功時，在瀏覽器中執行Home頁面，會彈出「測試Jquery參照」

在Home頁面新增程式碼，測試正常的Jquery事件冒泡

未阻止的Jquery事件冒泡：

1）當點選「內層div」的時候，會先觸發內層div的事件，再執行外層div的事件

2）當點選「外層div」的時候，會觸發外層div的事件，不會執行內層div的事件，即：冒泡是向上觸發事件的

在Home頁面的「內層div」點選事件中，新增阻止事件冒泡的程式碼，將不會看到「外層div」的事件執行

注意：如果不使用「return false」來阻止冒泡，上述程式碼在舊版本的IE中會報錯，需要換種方式實現。所以，安全起見，使用「return false;」適用任何瀏覽器