32

私はこの問題に数回遭遇しましたが、以前に使用したソリューションには満足していません。

内容を検証するぼかしイベントを含む入力ボックスと、クリック時に入力ボックスを埋めるボタンがあります。問題は、ボタンをクリックすると入力ぼかしイベントが発生し、次にボタンクリックイベントが発生するため、ボタンによって挿入されたコンテンツが検証されないことです。

http://jsfiddle.net/jakecr/dL3K3/を参照してください。

これが正しい動作であることはわかっていますが、問題を回避するためのきれいな方法は思いつきません。

4

6 に答える 6

40

職場でも同様の問題がありました。最終的にわかったのは、mousedown イベントが blur イベントの前に発生し、検証前にコンテンツを設定したり、フラグを使用して検証プロセスを完全にキャンセルしたりすることができるということです。

あなたの例を使用して作成したこのフィドルを確認してください- http://jsfiddle.net/dL3K3/31/

$(function(){
    var flag = true;
    $('input').blur(function(){
        if(!$(this).val() && flag){
            alert("Grrr, It's empty");
        }
    });

    $('button').mousedown(function(){
        flag = false;
    });    
    $('button').mouseup(function(){
        flag = true;
        $('input').val('content').focus();
    });

});

-編集-

@mclin が提案したように、mousedown イベントと preventDefault を使用すると、ぼかし動作が防止されます。そして、元のクリックイベントをそのままにしておくことができます-

http://jsfiddle.net/dL3K3/364/

$(function(){
    $('input').blur(function(){
        if(!$(this).val()){
            alert("Grrr, It's empty");
        }
    });

    $('button').mousedown(function(e){
        e.preventDefault();
    });    
    $('button').click(function(){
        $('input').val('content');
    });

});

このソリューションは、ほとんどの場合、少しクリーンで優れている可能性がありますが、これを使用すると、Default が防止され、現在フォーカスが置かれている他の要素がぼやけますが、ほとんどのユース ケースでは問題にならないことに注意してください。

于 2012-03-26T09:40:36.313 に答える
23

YoniJahよりも優れた解決策があります。ボタンのmousedownイベントでpreventDefaultを呼び出します。onBlurは発生しないため、クリックイベントで何でも自由に実行できます。

これは、マウスを上に向ける代わりにマウスを下に向けて物事を起こさせることによってクリック動作を変更しないため、より優れています。これは予期しない場合があります。

于 2013-01-31T19:24:51.857 に答える
8

これも役立つかもしれません：

ボタン クリック イベントを発生させる前に、blur イベント アクションを遅らせるタイマーを設定します。

// Namespace for timer var setTimer = { timer: null }

    $('input,select').blur(function () {
        setTimer.timer = setTimeout(function () {
           functionCall();
        }, 1000);
    });

    $('input,select').focus(function () {
        setTimer.timer = setTimeout(function () {
            functionCall();
        }, 1000);
    });

    $("#btn").click(function () {
        clearTimeout(setTimer.timer);
        functionCall();
    });
于 2010-12-30T05:03:38.650 に答える
2

入力検証ロジックを独自の関数に分離します。この関数は、blur イベントによって自動的に呼び出され、入力ボックスの値を変更した後にクリック イベントによって呼び出されます。確かに、検証ロジックは 2 回呼び出されますが、さらに多くの変更を加えずにそれを回避する方法はありません。

jQuery を使用した例:

$('input').blur(function() {
    validate(this);
});

$('submit').click(function() {
   //modify the input element
   validate(inputElement);
});

var validate = function(obj) {
   // validate the object
}
于 2010-11-03T18:41:31.487 に答える
0

マウスアップで子オブジェクトを取得すると便利な場合がありますが、親はぼかしで子を非表示にしたいと考えています。子要素の非表示をキャンセルし、マウスアップが発生するまで待ち、準備ができたら強制的にぼかしを発生させることができます

js

var cancelHide = false;

$('.my-input').blur(function() {
    if (!cancelHide) {
        $('.my-item').hide();
    }
});

$('.my-input').click(function() {
    $('.my-item').show();
});

$('.my-item').mousedown(function() {
    cancelHide = true;
});

$('.my-item').mouseup(function() {
    var text = $(this).text();
    alert(text);
    cancelHide = false;
    $('.my-input').blur();
});

html

<input type="text" class="my-input"/>
<div class="my-item">Hello</div>
<div class="my-item">Lovely</div>
<div class="my-item">World</div>

CSS

.my-item {
    display:none;
}

https://jsfiddle.net/tic84/on421rxg/

親がぼかしでそれらを非表示にしようとしているにもかかわらず、リスト項目をクリックすると、マウスアップでのみアラートが表示されます

于 2015-10-27T22:53:32.517 に答える