DIVマスクを使用して、マウスでチェックボックスを直接チェックすることが無効である問題を解決します

フロントエンドの開発過程で、チェックボックスが必要な状況が発生しました。ユーザー操作の利便性を考慮して、クリックイベントを DIV に配置しました。 (ここではknockout.jsが使用されています)

コードは大まかに次のようになります。

コードをコピー

コードは次のとおりです。

<div id="one" データバインド="click:clickevent">
<input type="checkbox"><span>ご質問がある場合はチェックしてください</span>
</div>

しかし、このように記述すると奇妙な現象が発生しました。マウスで div をクリックするとすべて正常でした。

しかし、マウスでチェックボックスを直接チェックするのは通常ではありません。

チェックボックスはチェックされていない状態です。チェックボックスをマウスでクリックしてチェックします。このとき、次の操作が実行されるはずです。1. div の clickevent イベントを実行します。2. イベントが実行されると、チェックボックスはチェックされた状態になります。

しかし、最終結果はチェックボックスがまだチェックされていないことです。

追跡とデバッグの結果、clickevent イベントが実行されると、チェックボックスはまだチェックされた状態ですが、clickevent の実行後に jquery コードが実行され、2 ～ 3 ステップ後にチェックボックスがチェックされていない状態に変更されます。

理由はまだ見つかっていません。（別の場所で使用されているラジオボックスでも同様の状況が発生します）

他に方法はないので、回避策を講じる必要があります。チェックボックスをdivで覆い、マウスをクリックするとチェックボックスではなくdivがクリックされるようにし、クリックイベントを通じてチェックボックスの状態を変更します（クリックイベントにはチェックボックスの状態を変更するコードが既に含まれています）。

実装は次のとおりです。

コードをコピー

コードは次のとおりです。

<div id="1">
<div id="two" データバインド="click:clickevent"></div>
<div id="3">
<input type="checkbox"/> <span>ご質問がある場合はチェックしてください</span>
</div>
</div>

ID 2 と 3 の 2 つの div には、2 つのプロパティ (position: absolute; z-index: 1;) を設定する必要があります。

上層の div の z-index 属性は、下層の div の z-index 属性よりも大きくなっています。

上記の DIV の ID 属性は説明用です。プログラムでは、通常、class 属性が使用されます。

<<: CSS3で線形グラデーションを実装するためのコードの詳細な説明

>>: MYSQL の 10 の典型的な最適化ケースとシナリオ