近期遇到比較麻煩的問題”非同步”問題,像是form submit之前不能確保一定完成執行,相對需要使用所謂的sleep相關作法,一開始以為可以成功結果一觸發事件就會submit 事件…。

停止事件

JavaScript事件,最常用的是onclick、onchange之類,本身事件中可以呼叫出event 事件。event 事件會紀錄著事件觸發的狀態。

event.preventDefault()

這做法可以延遲提交內容,如果用return false 會讓他失效,比較有效方式可以使用這個,先讓他把事件暫停加入我們想要的功能即可。目前遇到非同步時候最有效的做法。

1
2
3
4
5
6
7
8
9
$('form').submit((event)=>{
let form = this;
event.preventDefault();

setTimeout(()=>{
form.submit();
}, 1000);
})

測試範例

1
2
3
4
5
6
7
8
$('button').click((event)=>{
event.preventDefault();

setTimeout(()=>{
console.log('一秒後執行');
}, 1000);
})


event.stopPropagation()

這事件是針對多個div 重疊後,啟動click會產”事件冒泡”。功能主要是阻止事件冒泡,後續在補充。