触发模糊事件而不是单击

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

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

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

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

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

我很感激任何建议。

提前谢谢了！

 $(".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 } } 

Answer 1

好的，看看我在你的JS中做出的这些变化：我观察到：
模糊后单击事件触发器 。
而不是点击使用mousedown它将工作。

以下是我在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 } } 

希望它会帮助..干杯:) ..

Answer 2

试试下面的代码。

 $(".dropdown").on(click, ".item-option", function(event){ //set item object with dropdown option text ... ... ... updateOrder(true, item); $('.dropdown').hide(); event.stopPropagation(); }); //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 } } 

stopPropagation仅在点击事件中是必需的，因为一旦点击了下拉选项，模糊也会被触发，我们需要停止。 模糊不会触发点击，因此不需要stopPropagation。