触发模糊事件而不是单击 [英] Blur event is triggered instead of click

问题描述

当用户开始在输入字段中输入内容时，我正在处理的Web应用程序会生成带有自动填充选项的下拉菜单，如果用户单击其中一个选项，则会使用自动填充填充相应的输入字段文本。

When a user starts typing into an input field, the web app I'm working on generates drop down with auto-fill options, if a user clicks on one of the options, it populates the corresponding input fields with auto-fill text.

网络应用包含许多发票行，每个发票行都有自己隐藏的自动填充下拉列表，在自动填充选项可用之前，这些下拉列表一直处于隐藏状态。

The web app contains many invoice lines, each having their own hidden auto-fill dropdown that is hidden until auto-fill options are available.

如果用户点击自动填充选项，我想使用此自动填充文本更新订单。如果用户未在自动填充选项上单击并继续下一个发票行，我仍然希望使用用户输入的纯文本更新orderArray。

If a user clicks on an autofill option, I would like to update the order with this auto-fill text. If the user does not click on an autofill option and goes on to the next invoice line, I would still like to update the orderArray with the plain text the user entered.

为了实现这一点，我尝试使用模糊事件，但无论是否点击了下拉选项，此模糊事件都会触发，我需要触发当且仅当来自相应行的下拉选项未被点击。

To accomplish this, I tried using a blur event, however this blur event triggers regardless of whether or not a dropdown option was clicked, and I need to to be triggered if and only if a dropdown option from its corresponding line was not clicked.

我理解为什么模糊事件总是被触发，但是我通过分离这两个事件并正确更新顺序来克服这个问题非常困难。

I understand why the blur event is always getting triggered, however I am having an extremely difficult time overcoming this problem, by separating the two events and updating the order correctly.

我很感激建议。

非常感谢提前！

$(".dropdown").on(click, ".item-option", function(){                
    //set item object with dropdown option text
    ...
    ...
    ...

    updateOrder(true, item);
    $('.dropdown').hide();

});
//if customer enters custom information without clicking on item option
$('.id-input, .name-input, .price-input, .qty-input').blur(function(){

       updateOrder(false, {});
});


function updateOrder(clicked, item){
   if(clicked==true){
       //update order with the item information from the dropdown the user clicked
    }else{
      //update order by collecting all plaintext user entered into input fields
    }
}

推荐答案

好看看我在你的JS中做出的这些变化：
我观察过：

模糊后点击事件触发器。
而不是单击使用 mousedown 它将起作用。

Okay Have a look at these changes that I've made in your JS: I've Observed That:
click event triggers after the blur.
Instead of click use mousedown it will work.

以下是我所做的更改在你的JS中：

Here Are The changes I've made in your JS:

$(".dropdown").on("mousedown", ".item-option", function(e){                
  e.stopPropagation();
//set item object with dropdown option text
...
...
...

updateOrder(true, item);
$('.dropdown').hide();
return false;

});
//if customer enters custom information without clicking on item option
$('.id-input, .name-input, .price-input, .qty-input').blur(function(){

   updateOrder(false, {});
});


function updateOrder(clicked, item){
  if(clicked==true){
   //update order with the item information from the dropdown the user clicked
  }else{
  //update order by collecting all plaintext user entered into input fields
}
}

希望它会帮助..干杯：）..

Hope It'll Help.. Cheers :)..

这篇关于触发模糊事件而不是单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！