3

我有以下情况。（可以在这里找到一个 jsfiddle）

HTML

<div id="container">
    <input type="text" id="txtBox" />

    <div>
        <div class="option">Option 1</div>
        <div class="option">Option 2</div>
        <div class="option">Option 3</div>
    </div>

    <div id="out"></div>
</div>​

Javascript (jQuery)

$(".option").click(function(){
    $("#out").append("<br/>clicked " + $(this).html());
    $("#txtBox").val($(this).html());
});

$("#txtBox").change(function(){
    $("#out").append("<br/>changed value to " + $(this).val());
});

想法是用户可以在文本框中输入一个值，或者从选项列表中选择一个。选择的值使用 ajax 调用写入数据库，如果用户键入一个值，它将触发文本框上的更改处理程序，如果单击选项，则使用单击处理程序。

问题在于以下步骤：

  • 在文本框中输入一些随机值
  • 单击一个选项
  • -> 更改处理程序和单击处理程序一起触发。

现在这最后一种情况是非常不可取的，因为更改处理程序是使用文本框中的随机值触发的，并且单击处理程序是使用选项的 html 属性触发的。

我想要的只是单击处理程序正在执行，而更改处理程序在这种情况下什么都不做（或另一种解决方案，它产生在每个可能的用例中只采取一个动作的效果。有谁知道如何解决这个问题?

4

4 回答 4

4

Change your click handler to the mousedown event:

$(".option").mousedown(function(){
    $("#out").append("<br/>clicked " + $(this).html());
    $("#txtBox").val($(this).html());
});

Try it: http://jsfiddle.net/CAUQv/

You could also bind the the keyup event instead, that way, you're detecting every change performed by actual typing:

$("#txtBox").keyup(function(){
    $("#out").append("<br/>changed value to " + $(this).val());
});

Try it: http://jsfiddle.net/RZmtz/

Documentation

于 2012-09-07T14:29:07.553 回答
3

您可以在输入的值更改处理程序中构建超时并在选项单击处理程序中清除它。

var myTimeout;

$(".option").click(function(){
  clearTimeout(myTimeout);
  $("#out").append("<br/>clicked " + $(this).html());
  $("#txtBox").val($(this).html());
});

$("#txtBox").change(function(){
  myTimeout = setTimeout(function(){
    $("#out").append("<br/>changed value to " + $("#txtBox").val());
  }, 50);
});
于 2012-09-07T14:18:38.750 回答
1

如果用户在框中键入某些内容，则另一种选择是“禁用”这些选项：

http://jsfiddle.net/BcMZM/2/

$(".option").click(function(){
    if ($(this).hasClass("disabled")) return false;

    $("#out").append("<br/>clicked " + $(this).html());
    $("#txtBox").val($(this).html());
});

$("#txtBox").change(function(){
    if ($(this).val() == '') return false;

    $("#out").append("<br/>changed value to " + $(this).val());
});

$("#txtBox").keyup(function(){
    var val = $(this).val();     

    if (val != '')
        $(".option").addClass("disabled");
    else
        $(".option").removeClass("disabled");
});
于 2012-09-07T14:32:29.007 回答
0 
var delay = (function(){
 var timer = 0;
 return function(callback, ms){
  clearTimeout (timer);
  timer = setTimeout(callback, ms);
 };
})(jQuery);

var clickedOption = false;
$(".option").click(function(){
 clickedOption = true;
 $("#out").append("<br/>clicked " + $(this).html());
 $("#txtBox").val($(this).html());
});

$("#txtBox").change(function(){
var changeThis = $(this);
delay(function(){
if(!clickedOption){ $("#out").append("<br/>changed value to " + changeThis.val()); }
clickedOption = false;
}, 50 );

});
于 2012-09-07T15:02:09.473 回答