首先介紹一下這個問題出現的背景：我在寫網站時想要一套代碼兼容手機端和pc端，所以用了jquery和jquery mobile，點擊事件用的jquerymobile tap事件，但是在移動端測試時出現點擊一次但觸發執行兩次的情況，在網上找了一些資料，解決方案如下。
1、首先我在網上搜了一下相同問題的人，看到一個比較靠譜的回答。https://segmentfault.com/q/1010000000135980
有人提問原有的click點擊事件統統都會被執行兩次，代碼如下。
<!DocType html> <html> <head> <title>jquerymobile click triggered twice ?</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>奇怪了？！！</h1> <p>Some content here.</p> <p><img id="test" src="http://www.51roms.com/images/crazy.jpg" alt="Click me"></p> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script> var i = 0; $(document).bind('pageinit', function() { $('#test').bind('click', function(e) { alert('clicked: ' + i); i ++; }); }); </script> </body> </html>
然后解決方案說因為js執行了兩次，具體原因是：
如果你在頁面中沒有使用<div data-role="page">，jquery mobile會自己創建一個，因為它必須依賴這個。
它怎么創建呢？把body里面的內容復制一遍塞到div里去，body里如果有script就會被被塞入到新節點后，瀏覽器解釋為需要加載scirpt里的內容，最后奇跡就發生了。。。
因此只需要把所有的script內容放到head里即可，代碼如下。
<!DocType html> <html> <head> <title>jquerymobile click triggered twice ?</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script> var i = 0; $(document).bind('pageinit', function() { $('#test').bind('click', function(e) { alert('clicked: ' + i); i ++; }); }); </script> </head> <body> <h1>奇怪了？！！</h1> <p>Some content here.</p> <p><img id="test" src="http://www.51roms.com/images/crazy.jpg" alt="Click me"></p> </body> </html>
但是我的js文件必須在body內容里執行，否則會報錯。而且我在js里面加了alert語句試了一下發現並沒有加載兩次。看來這個解決方案行不通。那怎么辦呢？我又看到了另一個解決辦法。
2、http://www.cnblogs.com/shenbin/archive/2013/03/21/2973858.html
那就是直接用return false試了一下，真的好了，感謝博主。
我想了一下，產生這個問題的可能原因有兩個：
1、確實是如第2個博主所說的事件冒泡。
再把事件冒泡的解釋從網上搬來參考一下：http://blog.sina.com.cn/s/blog_a322154901015qkk.html
什么是JS事件冒泡？：
在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。
如何來阻止Jquery事件冒泡？
通過一個小例子來解釋
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs"Inherits="Default5"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Porschev---Jquery 事件冒泡</title> <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div id="divOne" onclick="alert('我是最外層');"> <div id="divTwo" onclick="alert('我是中間層！')"> <a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com" onclick="alert('我是最里層！')">點擊我</a> </div> </div> </form> </body> </html>
比如上面這個頁面，
分為三層：divOne是第外層，divTwo中間層，hr_three是最里層;
他們都有各自的click事件，最里層a標簽還有href屬性。
運行頁面，點擊“點擊我”,會依次彈出：我是最里層---->我是中間層---->我是最外層
---->然后再鏈接到百度.
這就是事件冒泡，本來我只點擊ID為hr_three的標簽，但是確執行了三個alert操作。
事件冒泡過程（以標簽ID表示）：hr_three----> divTwo----> divOne 。從最里層冒泡到最外層。
如何來阻止?
1.event.stopPropagation(); <script type="text/javascript"> $(function() { $("#hr_three").click(function(event) { event.stopPropagation(); }); }); <script>
再點擊“點擊我”，會彈出：我是最里層，然后鏈接到百度
2.return false;
如果頭部加入的是以下代碼
<script type="text/javascript"> $(function() { $("#hr_three").click(function(event) { return false; }); }); <script>
再點擊“點擊我”，會彈出：我是最里層，但不會執行鏈接到百度頁面
由此可以看出：
1.event.stopPropagation();
事件處理過程中，阻止了事件冒泡，但不會阻擊默認行為（它就執行了超鏈接的跳轉）
2.return false;
事件處理過程中，阻止了事件冒泡，也阻止了默認行為（比如剛才它就沒有執行超鏈接的跳轉）
還有一種有冒泡有關的：
3.event.preventDefault();
如果把它放在頭部A標簽的click事件中，點擊“點擊我”。
會發現它依次彈出：我是最里層---->我是中間層---->我是最外層，但最后卻沒有跳轉到百度
它的作用是：事件處理過程中，不阻擊事件冒泡，但阻擊默認行為（它只執行所有彈框，卻沒有執行超鏈接跳轉）
2、可能是移動端頁面js捕獲click事件的回調函數處理，需要300ms后才生效
這會間接導致影響其他業務邏輯的處理。
解決方案：（參考http://blog.csdn.net/xdongll/article/details/51908994）
fastclick可以解決在手機上點擊事件的300ms延遲，zepto的touch模塊，tap事件也是為了解決在click的延遲問題