無効化された入力要素がマウスイベントに応答しないことが判明_html/css_WEB-ITnose

数日前、カスタマーサービスをしていたときに、私たちのページが間違っていると私に言ってくれたお客様に会いました。お客様に尋ねた後、お互いに理解できないことがわかりました。スクリーンショットを撮ってみると、確かに私とは違うことがわかりました。リモートで行ってみると、相手が Win10 + Edge を使用していることがわかりました。ほろ酔いが表示されるはずの場所にマウスを移動すると、そこにありました。応答がありませんでした。顧客はプロンプトを見ることができなかったので、カスタマー サービスを見つけに駆け寄ったのも不思議ではありません

最初は、これだと思いました... Edge と IE11 で別の奇妙な jQuery イベント バインディング エラーが発生しました。ノックアウトの動的レンダリングが完了した後にバインディングを行う必要がありますが、注意深く調べたところ、これは当てはまらないことがわかり、「入力要素はマウスイベントに応答しません」と表示されました。 、しかし、なぜ Chrome はそれをサポートできるのでしょうか? テストのために Firefox も引っ張り出しましたが、マウスを使用すると、Chrome の太い眉と大きな目が再び常識外の動作をすることがわかりました。イベントは完了しましたが、別の機会にトリガーされたため、テストは問題ありませんでした

理由がわかったので、無効になった入力要素で一時停止イベントを実行する必要があります。Bootstrap によると、何をすべきでしょうか?外側にレイヤーを追加して、サスペンションイベントをパッケージのレイヤーにバインドするだけですが、さまざまな姿勢を変更した後、もう少しパッケージ化すると、マルチの側面からマウスが入ることがわかりました。 -package、イベントは正常にトリガーされます。これは一体何ですか? 長い間考えましたが、フローティングイベントをバインドするために外側にアイコンを作成しました。食事を終えて戻ってきたのですが、考えれば考えるほど間違っているのは、その入力要素の境界線が 1px であるため、Edge はこの領域が無効な入力に属していると認識してしまうからではないでしょうか。この領域の要素がまったく反応しません。非常に腹立たしかったので、パッケージのそのレイヤーに境界線を追加しました: 5px ソリッド透明; margin: -5px、これは本当に良いです...このレイヤーを無効な入力よりも実際に大きいパッケージ

しかし、私が理解していない落とし穴がまだいくつかあります

1. パッケージのそのレイヤーの z-index を作成するために追加の float または z-index 関係を設定する必要があるかどうかわかりません。 . マウスイベントに正しく応答できるように、ボーダーをハックする必要がないようにするため
最近他にもいろいろありすぎるので、とりあえずこの穴を埋めるだけ詳しく勉強します。フロントエンドを書くのは本当に人生の無駄です