()解剖学または単一の問題の履歴をクリックします

こんにちは、仲間。



jQueryの1つの問題に直面し、今、私は見つけたいと思っています:すべてがいつものように(馬鹿とカルマの残党に別れを告げる)またはjQueryのそのような機能ですか?



次のHTMLがあるとします。

< input id ="dis" type ="checkbox" /> <br> < input id ="chb" type ="checkbox" />< input id ="txt" type ="text" /> <br><br> * This source code was highlighted with Source Code Highlighter .







操作スキームは非常に簡単です。#chbチェックボックスは#txtテキストフィールドのアクティビティを制御し(チェックされている場合-!無効、およびその逆)、#disチェックボックスは#chbチェックボックスを無効にし(無効=「無効」)、状態を切り替えます。



サンプルコードを次に示します。

$( "#chb" ).click( function () {<br> $( "#txt" ).attr( "disabled" , ! this . checked );<br>});<br><br>$( "#dis" ).click( function () {<br> if ( $( "#chb" ).attr( "checked" ) )<br> {<br> $( "#chb" ).click();<br> }<br><br> $( "#chb" ).attr( "disabled" , this . checked ); <br>}); <br><br> * This source code was highlighted with Source Code Highlighter .







珍しいことではないでしょうか?



#chbをクリックすると、必要に応じてテキストフィールドのオン/オフが切り替わります。 ただし、#disをクリックすると、#chbのみが無効になります。 しかし、#txtはどうですか? 結局、$( "#chb")の実行()をクリックすると、それも無効になります。 (そうでない場合は、私を修正し、説明記事へのリンクをお願いします。ありがとう。)



テストが示したように、アクションのシーケンスにはいくつかの矛盾があります。



マウスでチェックボックスをクリックすると:

1)スイッチのチェック。

2)クリックハングハンドラーを実行します。



プログラムでクリック()を呼び出す場合:

1)クリックでハングしたハンドラーを実行します。

2)スイッチがチェックされました。



(クリックアラートにハングアップして確認できます)



つまり、同じ (一見)操作が異なるアクションのシーケンスを引き起こします。



#txtがオフにされない理由は明らかです。ハンドラーの実行中(コントロールチェックボックスがオンになっているかどうかを確認しますか?)、チェックボックスはオンのままです。



それではどうしますか?





何が起こっているかを知っているので、問題を解決できます。



要素の現在の状態(チェック済み)だけでなく、状態の変化(+1-チェック済みがfalseからtrueに変更され、-1-trueからfalse)が保存されていれば、すべてが素晴らしいでしょう。 残念ながら、私が知る限り、jQueryはこれに従いません。



さらに理解するための機器のビット。 要素をクリックすると、3つのイベントが順番に生成されます。

1)マウスダウン

2)マウスアップ

3)クリック

クリックは、チェックボックスの状態を切り替える役割を果たします。 そして、私たちが望むように振る舞わないので、完全にオフにしてmouseupを使用します。



これは私が解決策を見る方法です:

$( "#chb" ).click( function (e) {<br> // , <br> e.preventDefault();<br>});<br><br>$( "#dis" ).click( function () {<br> if ( $( "#chb" ).attr( "checked" ) )<br> {<br> $( "#chb" ).mouseup();<br> }<br><br> $( "#chb" ).attr( "disabled" , this . checked );<br>});<br><br>$( "#chb" ).mouseup( function () { <br> // — <br> this . checked = ! this . checked ; <br><br> $( "#txt" ).attr( "disabled" , ! this . checked ); <br>}); <br><br> * This source code was highlighted with Source Code Highlighter .







したがって、マウスアップから、予測可能な動作でクリックを行いました。



文章のスタイルについては申し訳ありませんが、読むのは難しいですが、別の書き方がわかりません。 いつかこれが誰かに役立つことを願っています。



そして、コメントで私はそのような異常な現象、批判、そしてより単純な解決策を説明することをうれしく思います(もしそれらが必要な場合)。 ご清聴ありがとうございました。



upd: Yeahの habraiserは、標準動作をトリガーすることなくイベントハングハンドラーを呼び出すことができるtriggerHandler関数を提案しました。 その後、初期バージョンの数行を変更することで簡単にできます。



$( "#dis" ).click(function() {

if ( $( "#chb" ).attr( "checked" ) )

{

// : ,

$( "#chb" ).attr( "checked" , false );

$( "#chb" ).triggerHandler( 'click' );

}



$( "#chb" ).attr( "disabled" , this . checked );

});



* This source code was highlighted with Source Code Highlighter .






そして、マウスアップなし。 しかし、この振る舞いの理由は疑問のままです。






All Articles