Question

当用户开始在输入字段中输入内容时，我正在处理的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。

触发模糊事件而不是单击

2 个答案: