停止預設事件的各種方法

2023 iThome 鐵人賽

DAY 13

自我挑戰組

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

15th鐵人賽 javascript

晚睡公主

2023-09-27 23:22:23

275 瀏覽

分享至

前言

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

今天會講到 continue、break、return false、event.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 事件綁定時(比較常聽到的)

尚未加上 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>

父層加上了 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>