web-dev-qa-db-ja.com

ぼかしの原因となるクリックイベントの後にJavascriptのぼかしイベントをどのように起動すればよいですか？

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

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

参照 http://jsfiddle.net/jakecr/dL3K3/

私はこれが正しい動作であることを知っていますが、問題を回避するためのクリーンな方法を考えることができません。

javascriptjqueryeventsonclickonblur
28
Jake

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

私があなたの例を使って作ったこのフィドルをチェックしてください 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と、フォーカスが現在設定されている他の要素のぼやけが防止されますが、ほとんどのユースケースでは問題になりません。

34
Yoni Jah

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

これは、予期しない可能性のある、マウスアップではなくマウスダウンで発生することによってクリック動作を変更しないため、優れています。

19
mclin

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

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

// 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();
    });
8
Vardhini

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

JQueryの使用例：

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

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

var validate = function(obj) {
   // validate the object
}
1
pitx3

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

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/

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

0
tic