Question

我有以下情况。（A jsfiddle of this can be found here）

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调用将所选值写入数据库，如果用户键入值，则会触发文本框上的更改处理程序，如果单击某个选项，则使用单击处理程序。

问题在于以下步骤：

在文本框中输入一些随机值
点击选项
- ＆gt;更改处理程序和点击处理程序一起触发。

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

我想要的只是点击处理程序正在执行，而变更处理程序在这种情况下什么也不做（或者在每个可能的用例中只产生一个单一操作的效果的另一个解决方案。有没有人知道如何接近这个？

Answer 1

将您的点击处理程序更改为mousedown事件：

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

试一试：http://jsfiddle.net/CAUQv/

您也可以绑定keyup事件，这样，您就会检测到实际输入所执行的每项更改：

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

试一试：http://jsfiddle.net/RZmtz/

<强>文档

jQuery.mousedown - http://api.jquery.com/mousedown/
jQuery.keyup - http://api.jquery.com/keyup/

Answer 2

您可以在输入的值更改处理程序中构建timeout，在选项单击处理程序中构建clear it。

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);
});

Answer 3

如果用户在框中输入内容，则另一个选项是“禁用”选项：

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");
});

Answer 4

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 );

});

Javascript文本输入更改处理程序结合div单击处理程序

4 个答案: