DIV マスクを使用して無効な checkbox_html/css_WEB-ITnose の問題を解決する

フロントエンド開発の過程で、ユーザーの操作の便宜上、クリックイベントを DIV に配置する必要がある状況に遭遇しました。 (Knockout.jsを使用します)

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

<div id="one" data-biind="click:clickevent">    <input type="checkbox"><span>有事请勾我</span></div>

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

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

チェックボックスはチェックされていない状態で、マウスで直接チェックボックスをクリックして選択します。 この時点で、次のことが達成されるはずです: 1. 実行します。 div の clickevent イベント。 2. イベントが実行されると、チェックボックスは Check ステータスになります。

しかし、最終的な結果は、チェックボックスがまだオフになっています。

追跡とデバッグの結果、clickevent イベントが実行されるとき、チェックボックスはまだチェックされた状態のままですが、clickevent が実行された後、2 つまたは 3 つのステップの後、チェックボックスが変更されます。未チェックの状態にします。

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

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

実装は次のとおりです:

<div id="one">    <div id="two" data-bind="click:clickevent"></div>    <div id="three">        <input type="checkbox"/> <span>有事请勾我</span>    </div></div>

ID 2 と 3 を持つ 2 つの div 。設定は、position:absolute; z-index:1;

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

上記の DIV の ID 属性は、一般的には、プログラム内で設定するために使用されます。