• Twitterでシェア
  • Facebookでシェア

なぜ <div> に onClick がダメなのか？

テクノロジー カテゴリーの変更を依頼 記事元:zenn.dev/tm35
適切な情報に変更
203 usersがブックマーク コメント25
    共有

    • 記事へのコメント25件

    • 注目コメント
    • 新着コメント
    その他
    Fluss_kawa
    Fluss_kawa HTMLはセマンティックにしとけって言うだけだよね。divタグはその範囲内をブロック要素にすると言う文脈以外で使うなってことでしょ。

    2023/06/19 リンク

    その他
    Knoa
    Knoa 「<div> に <button> の役割を与えてはならない」という意味だよね。たとえばLightbox系スクリプトで「閉じるボタンもあるけど、暗い背景をクリックしても閉じれる」みたいな用途だと、背景は <div> で問題ないと思う。

    2023/06/19 リンク

    その他
    i5s4y
    i5s4y Reactメインで書いてる人ってHTMLの仕様には無頓着なイメージあります

    2023/06/19 リンク

    その他
    n314
    n314 マウスのカーソルも変えないといけないよ

    2023/06/20 リンク

    その他
    yamadar
    yamadar “div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ”操作性が低いボタンになってしまう。

    2023/06/19 リンク

    その他
    vlxst1224
    vlxst1224 tableでサイト全体のレイアウトしたりborderで三角形描いたりとかHTMLとCSSは昔から「あるもので見た目だけ整える」系の裏技が多いから文章構造だけを見るマシーンからしたら混乱するよな。人にやさしく機械にもやさしく

    2023/06/20 リンク

    その他
    bopperjp
    bopperjp HTMLは低レベルすぎる。。どっかのCSSフレームワークに乗っかって、そこから一歩も出ないくらいしかできんわ。

    2023/06/20 リンク

    その他
    Helfard
    Helfard タブでフォーカスして欲しくないボタンもあるよね。

    2023/06/20 リンク

    その他
    manaten
    manaten 見た目も機能もボタンなら当然buttonなんだけど、例えばモーダル作っててオーバーレイしてる半透明の部分クリックしたらモーダル閉じさせたい、みたいなときに半透明部分を何にするかは悩む。buttonではなくねという

    2023/06/20 リンク

    その他
    mayumayu_nimolove
    mayumayu_nimolove 大半は「あなたの中ではダメ」なだけ

    2023/06/20 リンク

    その他
    xxxxxxxxlarge
    xxxxxxxxlarge じゃあ、インタラクティブなインターフェースを自作したいときはどうすんねんとは思う

    2023/06/20 リンク

    その他
    vlxst1224
    vlxst1224 tableでサイト全体のレイアウトしたりborderで三角形描いたりとかHTMLとCSSは昔から「あるもので見た目だけ整える」系の裏技が多いから文章構造だけを見るマシーンからしたら混乱するよな。人にやさしく機械にもやさしく

    2023/06/20 リンク

    その他
    diveintounlimit
    diveintounlimit なんだろう、ちゃんとHTML要素の意味を理解してから開発してもらってもいいですか

    2023/06/20 リンク

    その他
    flirt774
    flirt774 https://yuheiy.github.io/html-for-creators/ "一見取るに足らなそうな小さなインタラクションのひとつひとつが確実に実装されている" HTMLフレームワークの積み上げた努力の結晶なので正しく HTML を書きましょうと

    2023/06/20 リンク

    その他
    pmint
    pmint YouTubeではspaceのほかkでも再生・停止できる。Googleの多くのサービスやはてブではj/kがフォーカス移動。結局、標準（ルール）はいくつもあって、マークアップをどうしようがみんなダメ、機能不足になる。

    2023/06/20 リンク

    その他
    Finding
    Finding なるほどねー。こういうルールってどこまで従うべきなのかな。。。

    2023/06/20 リンク

    その他
    n314
    n314 マウスのカーソルも変えないといけないよ

    2023/06/20 リンク

    その他
    nakag0711
    nakag0711 returnキーとスペースキーは意味違うのでは…

    2023/06/20 リンク

    その他
    jintrick
    jintrick そもonclickという概念のセンスのなさ。

    2023/06/20 リンク

    その他
    kvx
    kvx 無意味ではありません。普段から対応できない人は試験前提の時もまともな構造で対応することはできません。

    2023/06/20 リンク

    その他
    spark7
    spark7 divでやってたやつはおらんのでは... 最低でもaを使っていたと思う。

    2023/06/20 リンク

    その他
    mohno
    mohno 「div要素にフォーカスを当てるためにはtabindex 属性を付与する必要があります」←方法があること自体知らなかった。

    2023/06/19 リンク

    その他
    i5s4y
    i5s4y Reactメインで書いてる人ってHTMLの仕様には無頓着なイメージあります

    2023/06/19 リンク

    その他
    rck10
    rck10 教科書的にはそのとおり。現実的には、tableやdivが乱発されていたのは当時なりの理由があるし、そういう過去資産を無視できないんだから、絵に描いた餅。

    2023/06/19 リンク

    その他
    masaru_al
    masaru_al 『ユーザーの操作が可能である要素は、可能な限り対話型コンテンツを使って実装していきましょう』

    2023/06/19 リンク

    その他
    Shinwiki
    Shinwiki 何度目のネタだ

    2023/06/19 リンク

    その他
    Fluss_kawa
    Fluss_kawa HTMLはセマンティックにしとけって言うだけだよね。divタグはその範囲内をブロック要素にすると言う文脈以外で使うなってことでしょ。

    2023/06/19 リンク

    その他
    Windymelt
    Windymelt a11yいいね

    2023/06/19 リンク

    その他
    Knoa
    Knoa 「<div> に <button> の役割を与えてはならない」という意味だよね。たとえばLightbox系スクリプトで「閉じるボタンもあるけど、暗い背景をクリックしても閉じれる」みたいな用途だと、背景は <div> で問題ないと思う。

    2023/06/19 リンク

    その他
    yamadar
    yamadar “div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ”操作性が低いボタンになってしまう。

    2023/06/19 リンク

    その他
    xlc
    xlc スクリーンリーダー対応するなら試験もしっかりやるべき。意識高く中途半端に対応するのは無意味。

    2023/06/19 リンク

    その他

    注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

    アプリのスクリーンショット
    いまの話題をアプリでチェック！
    • バナー広告なし
    • ミュート機能あり
    • ダークモード搭載
    アプリをダウンロード

    関連記事

    なぜ <div> に onClick がダメなのか？

    ■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ ただ、な...

    ブックマークしたユーザー

    すべてのユーザーの
    詳細を表示します

    同じサイトの新着

    同じサイトの新着をもっと読む

    いま人気の記事

    いま人気の記事をもっと読む

    いま人気の記事 - テクノロジー

    いま人気の記事 - テクノロジーをもっと読む

    新着記事 - テクノロジー

    新着記事 - テクノロジーをもっと読む

    同時期にブックマークされた記事

    はてなブックマーク

    公式Twitter

    はてなのサービス

    • App Storeからダウンロード
    • Google Playで手に入れよう
    Copyright © 2005-2024 Hatena. All Rights Reserved.