Googleマップとその右側にスクロールするdivがあります。私が抱えている問題は、誰かがマップをクリックしてドラッグし、スクロール div に移動して下向き矢印、または pgdn などを押すと、Google マップも移動することです。
マップでキーボード入力を無効にしたくありません。有効にしたままにしたいのですが、ユーザーが右側のスクロール div をホバーしたときに、何かに対してある種の blur() イベントを発生させる方法を見つけたいと考えています。これにより、キーボード入力が「聞こえない」ようにマップからフォーカスが外れます。
これは、マップ キャンバスの外側をクリックすると機能しますが、ユーザーが右の div にカーソルを合わせたときに、すべての種類のマップ キャンバス要素で blur() を呼び出してみました。
誰かが同様の問題に遭遇しましたか (そしてうまくいけば解決策)?
わかりました。そもそも問題を正しく解釈していれば、問題の半分は解決しました。あなたが望む動作は、マウスがマップの外にあるとき、キーを押してスクロールするdivを上下に移動することだと思いますか? そうでなければ、私が書いたものがうまくいくかもしれません (:
スクロールする div で強制的にクリックすることはできないため、私が思いついたハックは、目に見えないテキスト入力を挿入し、スクリプトがこのテキスト ボックス内でクリックするようにすることでした。これにより、マップに影響を与えるキープレスが停止しますが、スクロールバーも移動しません。古いブラウザーでは心配です。このクリック イベントは、テキスト ボックスが配置されている場所に div を自動的にスクロールします。あなたのページにもよりますが、地図の下のように位置を固定した方が良いと思います。
Chrome (キーを押してもマウスアウト後に何もしない) と Firefox (スクロールがクリックされた場合、マウスアウトがあるとスクロール div がキーを押すと移動します) で試しました。div をクリックしても一貫性がありません。理想的な解決策とはほど遠いですが、いくつかのアイデアを教えていただければ幸いです:(