点击模糊后不工作

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">

我觉得这是你的期望。