DIV マスクを使用して、mouse_HTML/Xhtml_Web ページ制作で直接選択された無効なチェックボックスの問題を解決します

フロントエンドの開発プロセス中に、ユーザーの操作の便宜上、クリック イベントが DIV に配置されることを確認する必要がある状況に遭遇しました。 (Knockout.jsを使用します)

コードはおおよそ次のとおりです:

コードをコピー

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

<div id="one" data-biind="click:clickevent">
<input type="checkbox"><span>ご不明な点がございましたらご確認ください&lt ;/span>

しかし、このように書くと、divをマウスでクリックすると正常に動作します。

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

チェックボックスはチェックされていない状態であり、このとき、マウスを直接クリックするとチェックボックスがオンになります。以下を達成する必要があります: 1. div の clickevent イベントを実行します。 2. イベントが実行された後、チェックボックスはチェックされた状態になります。

しかし、最終的な結果では、チェックボックスはまだチェックされていません。

追跡デバッグの結果は、clickevent イベントが実行されるとき、チェックボックスはまだチェックされた状態ですが、clickevent が実行されると、2 つまたは 3 つのステップの後、jquery コードの実行が開始されます。未選択状態に変わります。

原因はまだ見つかっていません。 (別の場所で使用しているラジオボックスも同様の状況です)

チェックボックスをdivのレイヤーで覆い、マウスクリック時にdivがクリックされるようにすることで回避するしかありません。チェックボックスの代わりに clickevent を通じてチェックボックスのステータスを変更します (clickevent イベントにチェックボックスのステータスを変更するコードがあります)

は次のように実装されます:

コードをコピーしますコードは次のとおりです:

<div id="one">
<div id="two " data-bind="click:clickevent">< /div>
<div id="three">
<input type="checkbox"/> <span>チェックを入れてくださいご不明な点がございましたらお問い合わせください</span>
</div>


ID 2 と 3 を設定するための鍵は次のとおりです。 2 つの属性を設定します:position:absolute; z-index:1;

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

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