前言

上周寫需求遇到了一點小坑涉及到一些小細節，今天趕上沒啥事總結一下分享出來。

click事件與blur事件沖突問題

click事件與blur事件

• blur事件: 表單事件，元素失去焦點時候觸發，不會冒泡;

• click事件: 當點擊元素的時候觸發，所有元素均有此事件，會冒泡；

注意:
除了focus和blur事件，其他的表單事件均會冒泡。

問題的提出

當點擊某個元素導致前一個元素失去焦點的時候，blur事件會先于click事件觸發。

document.querySelector('#ipt').addEventListener('blur', () => {console.log('blur'); }); document.querySelector('#btn').addEventListener('click', () => {console.log('click'); });// blur // click

解決方法

1. 延遲執行blur事件

document.querySelector('#ipt').addEventListener('blur', () => {setTimeout(() => {console.log('blur');}, 100); }); document.querySelector('#btn').addEventListener('click'() => {console.log('click'); });// blur // click

2. 用mousedown事件代替click事件

• mousedown事件：當鼠標指針移動到元素上方并按下鼠標按鍵時，觸發mousedown事件。

• mouseup事件：當在元素上松開鼠標按鈕時，會發生mouseup事件。

注意:

mousedown和mouseup與click 事件不同。mousedown事件僅需要按鍵被按下，而不需要松開即可發生；mouseup事件僅需要松開按鈕，當鼠標指針位于元素上方時，放松鼠標按鈕就會觸發該事件。

document.querySelector('#ipt').addEventListener('blur', () => {console.log('blur'); }); document.querySelector('#btn').addEventListener('click', () => {console.log('click'); }); document.querySelector('#btn').addEventListener('mousedown', () => {console.log('mousedown'); }); document.querySelector('#btn').addEventListener('mouseup', () => {console.log('mouseup'); });// mousedown // blur // mouseup // click

input文件上傳同名文件問題

問題的提出

通常我們在用input做文件上傳的時候，會為其綁定change事件，但是這時候會遇到一個問題，當我們在此上傳同一個文件的時候，該文件已經緩存到瀏覽器中了，如果不刷新的話，change事件無法重復觸發。

// HTML <input type="file" id="file" />// js document.querySelector('#file').addEventListener('change', () => {console.log('change');// ... })// 第一次上傳 file.xlsx // change // 第二次上傳 file.xlsx 不會觸發change事件

問題的解決

1. 手動觸發form的reset方法

// HTML <form id="form"><input type="file" id="file" /> </form> // js document.querySelector('#file').addEventListener('change', () => {console.log('change');// ...document.querySelector('#form').reset(); });// 第一次上傳 file.xlsx // change // 第二次上傳 file.xlsx // change

缺點: 不難看出這種方法我們必須為input元素包裹一個form元素，當只包含一個input元素時候這種方法就不適用了。

2. remove掉input元素

// HTML <form id="form"><input type="file" id="file" /> </form> // js let file = document.querySelector('#file'); file.addEventListener('change', () => {console.log('change');// ...file.remove();document.querySelector('#form').innerHTML = '<input type="file" id="file" />';});// 第一次上傳 file.xlsx // change // 第二次上傳 file.xlsx // change

缺點：這種方法需要修改dom結構了dom結構，可能導致節點樹的回流。

3. 更新change事件

// HTML <form id="form"><input type="file" id="file" /> </form> // js let file = document.querySelector('#file'); file.addEventListener('change', () => {console.log('change');// ...file.remove();file.onchange = function () {// ...}});// 第一次上傳 file.xlsx // change // 第二次上傳 file.xlsx // change

總結

以上是生活随笔為你收集整理的踩坑 - click事件与blur事件冲突问题 input文件上传同名文件问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。