模糊后点击不起作用

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

  

我只想在模糊后点击一下。

你是。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

问题：alert()阻止了用户界面

当您onclick上有alert()（或confirm()）时，按钮的onblur事件未被触发。 alert()阻止您的用户界面在网页上制作任何其他活动。基本上当文本框具有焦点时单击按钮时会发生什么：

• 文本框的onblur会被触发，会立即触发alert()。
• alert()阻止UI线程 - 您将鼠标移动到点击警告的确定按钮;或者你没有。在任何情况下，由于onclick，任何进一步的UI事件（即按钮alert()）都会被拒绝。

解决方案：不要阻止UI

通常，阻止浏览器执行其他任何操作都是一个坏主意。这会产生糟糕的用户体验。以下解决方法告诉您如何避免它。

alert()使用setTimeout()

一种解决方法是alert()使用setTimeout()，确保它不会阻止该页面。但是，这不会等待，以便用户确认alert()移动到按钮的onclick事件。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

最好使用其他方法获取用户反馈

另一个更优选的解决方案是不依赖alert()和confirm()来吸引用户＆＃39;输入，并实现一个非阻塞模态 - 你会找到ton of libraries。

Answer 2

我不是肯定的我理解你的问题。听起来你想要的是在btnclk()元素上注册blur事件时调用点击处理程序中使用的函数（ ie ，<input />） （text - 类型<input />，即）。如果是这种情况，请尝试以下内容：

``` 我不是肯定的我理解你的问题。听起来你想要的是在btnclk()元素上注册blur事件时调用点击处理程序中使用的函数（ ie ，<input />） （text - 类型<input />，即）。如果是这种情况，请尝试以下内容：

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

Answer 3

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

我认为这是你的期望。

Answer 4

你可以在下面的模糊中调用你的点击功能...所以一旦文本框模糊，你的模糊操作就完成了，你的点击动作也可以通过调用点击功能来完成。

<强>的Javascript

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

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