3

http://jsfiddle.net/rpfHw/

で追加および削除されるinputand クラスがあります。activemousedownmouseup

マウスカーソルを入力の上に置くとうまく機能します。

問題は、mouseupクリックした後、カーソルを押したinputままにしてカーソルを削除した後に機能しないことです-クラスactiveは削除されません。

修正できますか？

4

6 に答える 6

4

これmouseupは、 が入力ではなく外部で発生したためです。documentそのために、オブジェクトで汎用イベント ハンドラーを使用できます。

$(document).mouseup(function() {
    $('input.active').removeClass('active');
});

http://jsfiddle.net/rpfHw/1/

于 2013-02-25T14:53:06.933 に答える
2

CSSソリューションを提案します。このルールで同じ効果を得ることができます:

input:active{
    outline: 10px solid #000;
}

(IE8+)

http://jsfiddle.net/rpfHw/6/

于 2013-02-25T14:55:20.080 に答える
1

イベント focusin および focusout をリッスンすることをお勧めします。キーボードで入力を選択したり、キーボードでそれらをそのままにした場合、マウスイベントは発生しません。

次のように実行できます。

$('input').on('focusin focusout', function(event) {
    $(this).toggleClass('active', event.type==='focusin');
});

マウスを内側に置いてマウスを外側にドラッグすると、要素にまだフォーカスがあるため、説明している問題は引き続き発生しますが、入力にはまだフォーカスがあるため、問題ないと思います。

マウスイベントで完全に処理し、マウスを外側にドラッグするというこの問題を考慮したい場合は、dom オブジェクトにマウスイベントを実装してから、ハンドラー内の適切な要素を確認する必要があります。

于 2013-02-25T14:58:46.810 に答える
0

さて、私はこれを修正するために多くの方法を試しました。

mouseupをwithに置き換えると、より良い結果が得られmouseoutます。

マウスを使用しているため、ホバーしていないときにクラスを削除するだけです。

于 2013-02-25T17:08:16.037 に答える
0

次のコードを確認してください。

$('input').bind('click mouseup mousedown', function(event) { // クリック イベントのコード

if (event.type == 'mousedown'){
    console.log('mousedown');    
    $(this).addClass('active');
    }


if (event.type == 'mouseup'){
    console.log('mouseup');
    $(this).removeClass('active');
}

//console.log(event.type);

}); http://jsfiddle.net/rpfHw/3/

一番

于 2013-02-25T14:55:04.560 に答える