Firefoxのバグ:サイズ変更:垂直にフォーカスを設定するとクリックイベントが失われる

rwalter:

問題:textareaに次のCSSがある場合、Firefoxは最初のクリックイベントを失います。

textarea:focus {
    resize: vertical;
}

デモを見る:http : //jsbin.com/wuxomaneba/edit?html,css,output

これに対する解決策は簡単です- :focusセレクターを削除します。

ただし、これが発生する理由と、これが発生する可能性のある他のcssルールまたは状況はありますか?

Nickolay:

これはバグのように見えますが(提出してくれてありがとう!)、通常、イベントmousedownmouseupイベントの両方を監視した最も深い要素にクリックイベントが送出されます。したがって、同様にtextarea :focus(たとえばposition:absolute; top: xxxに移動することで、クリックイベントを「中断」できます。これは、イベントの順序がマウスダウン->フォーカス(Webページを更新)->マウス->クリックであるためです。

このresizeプロパティ、Webページには表示されないが、ブラウザがユーザーの利益のために追加のUIを実装するために使用する「匿名コンテンツ」制御します。私の推測では、このコンテンツへの変更はclickイベント検出干渉しますが、デバッグビルドでこれを確認しないと、確実に言うことは不可能です。

function logEvent(ev) {console.log(ev.type, window.getComputedStyle(document.querySelector("textarea")).resize)}

document.querySelector("textarea").addEventListener("mousedown", logEvent, false);
document.querySelector("textarea").addEventListener("focus", logEvent, false);
document.querySelector("textarea").addEventListener("mouseup", logEvent, false);
document.querySelector("textarea").addEventListener("click", logEvent, true);
textarea:focus{
  position:absolute; top: 500px;
  /*resize:vertical;*/
}
<textarea>click me</textarea>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

iOS 9.2:[リスト(複数)]を選択すると、変更イベントが誤って発生し、フォーカスの最初のオプションに値が設定されます。(サファリとクローム)

分類Dev

Firefoxでは、キーダウンイベントハンドラーでフォーカスを変更すると、フォーカスされているものが自動的にクリックされます。どうすればこれを防ぐことができますか?

分類Dev

CSS:ログイン失敗後にフォーム入力テキストボックスのサイズが変更される

分類Dev

CSS:ログイン失敗後にフォーム入力テキストボックスのサイズが変更される

分類Dev

高さを変更するとサファリモバイルスクロールが失われる

分類Dev

タグが変更されたときにマウスカーソルの下のクライアントにフォーカスを設定するにはどうすればよいですか?

分類Dev

ホバーのリンクのフォントサイズを大きくすると、背景色のサイズが変わります。これを止めるにはどうすればよいですか?

分類Dev

Android-アプリがバックグラウンドにあるときにリサイクラービューのサイズが変更されます

分類Dev

Firemonkeyで印刷すると、クライアントのフォーマット設定が変更されます

分類Dev

リンク訪問後にアンカータグのフォントサイズを変更することはできません

分類Dev

ユーザーがダイアログボックスのサイズを変更したときに自動的にサイズを変更するようにwpfテキストボックスを設定するにはどうすればよいですか?

分類Dev

アップロードする画像のサイズを変更した後、XHRリクエストとフォームテストを組み合わせる

分類Dev

background-sizeをカバー以外に設定すると、画像のサイズが変更されるたびにdiv内のテキストがオーバーフローします。どうすればそれを防ぐことができますか?

分類Dev

ダイグラフのリンクされたグラフのサイズを変更するときに、凡例が所定の位置に留まらない

分類Dev

マウスオーバー時にSVGクリッピングマスクのサイズを変更する

分類Dev

角度6でウィンドウのサイズが変更されたりフォーカスが失われたりしたときに再レンダリングを防ぐにはどうすればよいですか?

分類Dev

クリックしたスピナーに基づいてフォントサイズを変更する方法

分類Dev

Firefoxの検索ボックスのポップアップフォントサイズを変更するにはどうすればよいですか?

分類Dev

バッチスクリプトを使用して、そのフォルダー内に設定された数のファイルがある複数のフォルダーの名前を変更するにはどうすればよいですか?

分類Dev

グリッドビューテンプレートフィールドの境界フィールドにテキストボックスのフォントサイズを設定するにはどうすればよいですか?

分類Dev

Eclipseバージョン:2019-12(4.14.0)のプロジェクト/パッケージエクスプローラーでフォントサイズ/ズームレベルを変更するにはどうすればよいですか?

分類Dev

Laravelでサードパーティのコンポーザー(ベンダー)パッケージを安全に編集し、パッケージの新しいバージョンのリリース時にカスタマイズされた変更が失われるのを防ぎます

分類Dev

TFSサービスのWebフックイベントが失敗したとき、またはWebフックの状態に変化があったときに通知を設定する方法はありますか?

分類Dev

Flutter:子がオーバーフローしたときにスタックのサイズを変更する

分類Dev

テキストボックスのフォーカスが失われると、リストボックスアイテムの選択が解除されます

分類Dev

wpfで2つのテキストボックスグリッドのフォントサイズを動的に設定する方法

分類Dev

モバイルでフォントのサイズを変更するために@mediaクエリを機能させることができません

分類Dev

Firefoxデバッガのフォントサイズを変更する方法

分類Dev

Firefoxデバッガのフォントサイズを変更する方法

Related 関連記事

  1. 1

    iOS 9.2:[リスト(複数)]を選択すると、変更イベントが誤って発生し、フォーカスの最初のオプションに値が設定されます。(サファリとクローム)

  2. 2

    Firefoxでは、キーダウンイベントハンドラーでフォーカスを変更すると、フォーカスされているものが自動的にクリックされます。どうすればこれを防ぐことができますか?

  3. 3

    CSS:ログイン失敗後にフォーム入力テキストボックスのサイズが変更される

  4. 4

    CSS:ログイン失敗後にフォーム入力テキストボックスのサイズが変更される

  5. 5

    高さを変更するとサファリモバイルスクロールが失われる

  6. 6

    タグが変更されたときにマウスカーソルの下のクライアントにフォーカスを設定するにはどうすればよいですか?

  7. 7

    ホバーのリンクのフォントサイズを大きくすると、背景色のサイズが変わります。これを止めるにはどうすればよいですか?

  8. 8

    Android-アプリがバックグラウンドにあるときにリサイクラービューのサイズが変更されます

  9. 9

    Firemonkeyで印刷すると、クライアントのフォーマット設定が変更されます

  10. 10

    リンク訪問後にアンカータグのフォントサイズを変更することはできません

  11. 11

    ユーザーがダイアログボックスのサイズを変更したときに自動的にサイズを変更するようにwpfテキストボックスを設定するにはどうすればよいですか?

  12. 12

    アップロードする画像のサイズを変更した後、XHRリクエストとフォームテストを組み合わせる

  13. 13

    background-sizeをカバー以外に設定すると、画像のサイズが変更されるたびにdiv内のテキストがオーバーフローします。どうすればそれを防ぐことができますか?

  14. 14

    ダイグラフのリンクされたグラフのサイズを変更するときに、凡例が所定の位置に留まらない

  15. 15

    マウスオーバー時にSVGクリッピングマスクのサイズを変更する

  16. 16

    角度6でウィンドウのサイズが変更されたりフォーカスが失われたりしたときに再レンダリングを防ぐにはどうすればよいですか?

  17. 17

    クリックしたスピナーに基づいてフォントサイズを変更する方法

  18. 18

    Firefoxの検索ボックスのポップアップフォントサイズを変更するにはどうすればよいですか?

  19. 19

    バッチスクリプトを使用して、そのフォルダー内に設定された数のファイルがある複数のフォルダーの名前を変更するにはどうすればよいですか?

  20. 20

    グリッドビューテンプレートフィールドの境界フィールドにテキストボックスのフォントサイズを設定するにはどうすればよいですか?

  21. 21

    Eclipseバージョン:2019-12(4.14.0)のプロジェクト/パッケージエクスプローラーでフォントサイズ/ズームレベルを変更するにはどうすればよいですか?

  22. 22

    Laravelでサードパーティのコンポーザー(ベンダー)パッケージを安全に編集し、パッケージの新しいバージョンのリリース時にカスタマイズされた変更が失われるのを防ぎます

  23. 23

    TFSサービスのWebフックイベントが失敗したとき、またはWebフックの状態に変化があったときに通知を設定する方法はありますか?

  24. 24

    Flutter:子がオーバーフローしたときにスタックのサイズを変更する

  25. 25

    テキストボックスのフォーカスが失われると、リストボックスアイテムの選択が解除されます

  26. 26

    wpfで2つのテキストボックスグリッドのフォントサイズを動的に設定する方法

  27. 27

    モバイルでフォントのサイズを変更するために@mediaクエリを機能させることができません

  28. 28

    Firefoxデバッガのフォントサイズを変更する方法

  29. 29

    Firefoxデバッガのフォントサイズを変更する方法

ホットタグ

アーカイブ