iT邦幫忙

2023 iThome 鐵人賽

DAY 13
0
自我挑戰組

前端菜雞_賀周歲成長日誌系列 第 13

停止預設事件的各種方法

  • 分享至 

  • xImage
  •  

前言

在寫功能時,有時會突然忘記如果我想要停止預設事件,應該要用 return false、還是 break、還是其他的方法.…。於是整理了這篇筆記,將這些使用時機各有不同、”讓預設事件停止”的方法收集起來。

今天會講到 continuebreakreturn falseevent.preventDefault()event.stopPropagation()


continue

  • 只退出當前的那次迴圈,迴圈還是會繼續跑下去。
  • 從程式碼中可以看出,判斷式一成立、一遇到 continue,當次的迴圈就被跳過了。
let fruitArray = ['apple', 'orange', 'guava', 'passionfruit', 'kiwi']
for (let i = 0; i < fruitArray.length; i++) {
    if(fruitArray[i] === 'guava'){
        continue
    }
    console.log(fruitArray[i])
}

>> apple
>> orange
>> passionfruit
>> kiwi

break

  • 退出迴圈,且不再跑下去
  • 在這個範例中則可以看到,一遇到 break,整個迴圈就不再執行。
let fruitArray = ['apple', 'orange', 'guava', 'passionfruit', 'kiwi']
for (let i = 0; i < fruitArray.length; i++) {
    if(fruitArray[i] === 'guava'){
        break
    }
    console.log(fruitArray[i])
}

>> apple
>> orange

return false

  • 用於指定函數回傳的值(return結果等等),return false 時會停止動作,包括停止提交表單、停止函數繼續執行。
  • 只在當前的函數中會起作用,不會影響到外層的函數執行狀況。
const testFuntion = (num) => {
  if(num > 5){
      return false
  }
  console.log(num)
}
testFuntion(1)
testFuntion(7)
testFuntion(4)

>> 1
>>
>> 4
let yes = confirm('要這樣做?')
if (yes) {
	// 進行
}
// 如果不這樣做就跳出去
return false

event.preventDefault()

停止事件預設動作,例如點按 a 標籤、甚至是表單 checkbox 的勾選功能,都可以利用 preventDefault 事件來停止它們原本會有的行為。

以下兩例:

  • <a> ⇒ 跳轉視窗 ⇒ 對a標籤元素加上 preventDefault 事件 ⇒ 按連結沒反應,不會跳轉。
  • <input type="checkbox"/> ⇒ 可以勾選 ⇒ 對input元素加上 preventDefault 事件 ⇒ 不能勾選。
<html>
  <body>
    <a href="https://www.youtube.com/" target="_blank">事件預設測試</a>
    <input type="checkbox"/>事件預設測試

    <script>
			document.querySelector("a").addEventListener( "click", function (event) {
          event.preventDefault();
          },
      );

      document.querySelector("input").addEventListener( "click", function (event) {
          event.preventDefault();
          },
      );
    </script>
  </body>
</html>

event.stopPropagation()

停止事件冒泡:onclick 事件綁定時(比較常聽到的)

  1. 尚未加上 stopPropagation 事件

按下「事件冒泡子層」button。

內層外層都有 onclick 事件。當被包在內層的子層,被觸發 onclick 事件,印出「子層事件」;外層的函式也會被觸發所以印出「父層事件」。

<html>
  <body>

    <div onclick="propagationParents()" style="padding: 50px; border: 1px solid #000;">
				事件冒泡父層
        <button onclick="propagationChild()" style="padding: 10px;">事件冒泡子層</button>
    </div>

    <script>

        const propagationParents = () => {
            console.log('父層事件')
        }
    
        const propagationChild = () => {
            console.log('子層事件')
        }
    </script>
  </body>

</html>

https://ithelp.ithome.com.tw/upload/images/20230927/20162572J7IE70jXKf.png

  1. 父層加上了 stopPropagation 事件

按下「事件冒泡子層」button

子層被觸發 onclick,印出「子層事件」;外層的函式因為被擋掉了冒泡事件,所以不會跟著印出文字。

<html>
  <body>

    <div onclick="propagationParents" style="padding: 50px; border: 1px solid #000;">
				事件冒泡父層
        <button onclick="propagationChild()" style="padding: 10px;">事件冒泡子層</button>
    </div>

    <script>

        const propagationParents = (event) => {
						event.stopPropagation()
            console.log('父層事件')
        }
    
        const propagationChild = () => {
            console.log('子層事件')
        }
    </script>
  </body>

</html>

https://ithelp.ithome.com.tw/upload/images/20230927/20162572DNe3K5BwON.png


結語

今天提到了 continuebreakreturn falseevent.preventDefault()event.stopPropagation(),都是簡單說明。

今天就到這,如有說明不周或錯誤的地方,還請多留言討論(鞠躬)。

參考

break、continue https://blog.csdn.net/m0_58258383/article/details/122981323
https://www.delftstack.com/zh-tw/howto/javascript/javascript-return-false/
https://ithelp.ithome.com.tw/articles/10198999


上一篇
關於運算子
下一篇
關於正規表達式(有表單驗證寫法)
系列文
前端菜雞_賀周歲成長日誌31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言