點擊模糊後不工作

Question

我編輯的文本框，按鈕上直接點擊，它不火單擊按鈕的事件。

有很多類似的帖子建議使用onmousedown而不是onclick，但我不認爲它是解決方案。因爲我正在做一些關於我的文本輸入模糊事件的工作，以及點擊按鈕時的一些驗證。在模糊之前調用onmousedown意味着模糊後我無法進行驗證。我只想模糊後致電點擊。有什麼辦法可以做到嗎？

HTML

<input type="text" onblur="txtblr()"> 
<input type="button" onclick="btnclk()" value="button"> 

的Javascript

function txtblr(){ 
if(confirm('relly?')) { 
    console.log('blur'); 
    } 
else { 
    console.log('dont blur'); 
    } 
} 

function btnclk(){ 
    console.log('click'); 
} 

Fiddle

Answer 1

我只是想打電話給模糊後點擊。

是你。

function txtblr() { 
 
    console.log('blur'); 
 
} 
 

 
function btnclk() { 
 
    console.log('click'); 
 
}

<input type="text" onblur="txtblr()"> 
 
<input type="button" onclick="btnclk()" value="button">

問題：alert()塊的UI

當您在onblur有alert()（或confirm()）沒有被觸發按鈕的onclick事件。 alert() s阻止您的用戶界面在頁面上進行任何其他事件。這裏的主要按鈕被按下時，當文本框具有焦點會發生什麼：

• 文本框的onblur被激發，其將立即觸發的alert()。
• alert()阻止UI線程 - 您將鼠標移動到單擊警報的OK按鈕;或者你沒有。在任何情況下，由於alert()，任何進一步的UI事件（即按鈕onclick）都會被拒絕。

解決辦法：不要阻塞UI

一般情況下，這是一個壞主意，以阻止執行任何其他的布勞爾。這會造成糟糕的用戶體驗。以下解決方法告訴您如何避免它。

alert()使用setTimeout()

一種解決方法是使用setTimeout()alert()，確保它不會阻止頁面。然而，這並不等待的alert()由用戶進行確認移動到按鈕的onclick事件。

function txtblr() { 
 
    setTimeout(function() { 
 
    alert('blur'); 
 
    }, 100); 
 
} 
 

 
function btnclk() { 
 
    console.log('click'); 
 
}

<input type="text" onblur="txtblr()"> 
 
<input type="button" onclick="btnclk()" value="button">

優選地，使用其他方法來獲得用戶反饋

另一種更優選的解決辦法是不依賴於alert() S和confirm() s至得到用戶的輸入，並執行一非阻塞模式 - 其中你會發現一個ton of libraries。

Answer 2

我不積極我正在理解你的問題。聽起來你想要的是在<input />元素（即text-<input />，也就是這樣）上註冊blur事件時，調用您的點擊處理函數（，即,btnclk()）中使用的函數。如果是這樣，請嘗試如下所示：

``` 我不積極我正在理解你的問題。聽起來你想要的是在<input />元素（即text-<input />，也就是這樣）上註冊blur事件時，調用您的點擊處理函數（，即,btnclk()）中使用的函數。如果是這樣的話，你可以試試下面的：

window.addEventListener('DOMContentLoaded', function() { 
    document 
    .querySelector('input[type="text"]') 
    .addEventListener('blur', btnclk); 
}); 

Answer 3

，你可以打電話給你的點擊功能在像下面的模糊......所以一旦文本框是模糊的模糊操作完成，並您的點擊操作是通過調用click函數完成。

的Javascript

function txtblr(){ 
alert('blur'); 
btnclk(); 
} 

function btnclk(){ 
alert('click'); 
} 

Answer 4

function txtblr(){ 
 
if(confirm('relly?')) { 
 
    console.log('blur'); 
 
    } 
 
else { 
 
    console.log('dont blur'); 
 
    } 
 
} 
 

 
function btnclk(){ 
 
    txtblr(); 
 
    console.log('click'); 
 
}

<input type="text" onblur="txtblr()"> 
 
<input type="button" onclick="btnclk()" value="button">

我覺得這是你的期望。