# e.preventDefault vs e.stopPropagation vs return false ## 範例 ```htmlmixed <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body> <div id="a">aaaaaaaaaaaaa <div id="b">bbbbbbbbbbbbb <div id="c">ccccccccccccccc</div> </div> </div> <div id="default">預設</div> </body> </html> ``` ### 原始狀態 點選後會觸發自己本身及所有父元素，順序為自己本身至父元素 #### 測試程式 ```htmlmixed <script type="text/javascript"> $(document).ready(function(){ $("#a").click(function(event){ $("#default").text('a'); console.log('a'); }); $("#b").click(function(event){ $("#default").text('b'); console.log('b'); }); $("#c").click(function(event){ $("#default").text('c'); console.log('c'); }); }); </script> ``` ##### 點選 a console: a 預設 >> a ##### 點選 b console: b >> a 預設 >> a ##### 點選 c console: c >> b >> a 預設 >> a ## e.preventDefault 測試結果，簡單來說 e.preventDefault是阻止瀏覽器的默認行為，其實與父、子元素無關只與自己本相關，例如:超連結若加上e.preventDefault那點選時就不會觸發等等 ### 點選後立即觸發 event.preventDefault() 點選後會觸發自己本身及所有父元素，順序為自己本身至父元素，測試結果同原始狀態，若該狀態如超連結。 #### 測試程式 ```htmlmixed <script type="text/javascript"> $(document).ready(function(){ $("#a").click(function(event){ //event.preventDefault(); $("#default").text('a'); console.log('a'); }); $("#b").click(function(event){ //event.preventDefault(); $("#default").text('b'); console.log('b'); }); $("#c").click(function(event){ //event.preventDefault(); $("#default").text('c'); console.log('c'); }); }); </script> ``` ##### event.preventDefault()，放置在 a 點選 a console: a 預設 >> a ##### event.preventDefault()，放置在 a 點選 b console: b >> a 預設 >> a ##### event.preventDefault()，放置在 a 點選 c console: c >> b >> a 預設 >> a ##### event.preventDefault()，放置在 b 點選 a console: a 預設 >> a ##### event.preventDefault()，放置在 b 點選 b console: b >> a 預設 >> a ##### event.preventDefault()，放置在 b 點選 c console: c >> b >> a 預設 >> a ##### event.preventDefault()，放置在 c 點選 a console: a 預設 >> a ##### event.preventDefault()，放置在 c 點選 b console: b >> a 預設 >> a ##### event.preventDefault()，放置在 c 點選 c console: c >> b >> a 預設 >> a ## e.stopPropagation 簡單說加到哪一層那他的父層就不會再被觸發了，目前看起來e.stopPropagation放置順序並沒有影響。 #### 測試程式 ```htmlmixed <script type="text/javascript"> $(document).ready(function(){ $("#a").click(function(event){ //event.stopPropagation(); $("#default").text('a'); console.log('a'); }); $("#b").click(function(event){ //event.stopPropagation(); $("#default").text('b'); console.log('b'); }); $("#c").click(function(event){ //event.stopPropagation(); $("#default").text('c'); console.log('c'); }); }); ``` ##### event.stopPropagation()，放置在 a 點選 a console: a 預設 >> a ##### event.stopPropagation()，放置在 a 點選 b console: b >> a 預設 >> a ##### event.stopPropagation()，放置在 a 點選 c console: c >> b >> a 預設 >> a ##### event.stopPropagation()，放置在 b 點選 a console: a 預設 >> a ##### event.stopPropagation()，放置在 b 點選 b console: b 預設 >> b ##### event.stopPropagation()，放置在 b 點選 c console: c >> b 預設 >> b ##### event.stopPropagation()，放置在 c 點選 a console: a 預設 >> a ##### event.stopPropagation()，放置在 c 點選 b console: b >> a 預設 >> a ##### event.stopPropagation()，放置在 c 點選 c console: c 預設 >> c ## return false = e.preventDefault + e.stopPropagation 另外補充 return false 的放置位置會影響 click 事件內的程式碼執行到哪，但e.preventDefault、e.stopPropagation，目前看起來不影響。 ###### tags: `JavaScript`