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属性を使用してトリガーされるため、この最後の状況は非常に望ましくありません。

私が欲しいのは、クリックハンドラーを実行し、変更ハンドラーがこの状況で何もしないことです（または、考えられる各ユースケースで1つのアクションを実行するだけの効果を生み出す別のソリューションです。これにアプローチする方法を知っている人はいますか？ ？

4

4 に答える 4

4

クリックハンドラーを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/

ドキュメンテーション

于 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 に答える