onclickのイベントが使えるhtmlタグ

Question

開発環境
・react
・Typescript
・styled-components

上記の開発環境で実装しています。
onClickのイベントの時に処理を書きたいのですがonClickのイベントが使えるのはbuttomだけなのでしょうか？
どのタグにもtype="bottom" をつければonClickイベントが使えるようになるのでしょうか？

わかる人がいましたらご教授お願いしたいです

Comments

[m.ts10806]

「ボトム」ではないかと思います。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/button

[退会済みユーザー]

ほぼ全ての表示可能なHTMLタグで使えると思いますが、何故試してないのですか？

https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onclick

[miyabi_pudding]

もし、Reactを使った上で、onClickイベントを使えないパターンがあったのであれば、
その使えなかったパターンのコードを提示してください。
質問のアプローチとして、できなかった状態の自身のコードを晒した方が、
回答も付きやすいし、解決の早道かと。

Answer 1

どのタグにもtype="bottom" をつければonClickイベントが使えるようになるのでしょうか？

検討すべき方向性が間違ってます。
「type属性」自体が使えない（何の効果も持たない）タグもあります。
「付与したい要素自体にclickイベントを付与できるかどうか」のみ考えてください。

ReactやTypeScriptに明るいわけではないですが、
大抵の要素にonclickはつけられるかと思います。

例えば投稿枠の右上にある「tips」なんかはdivタグのようですし、
「質問する」ボタンはaタグです（こちらは遷移ですが）。
まず、簡単なコード組んで試してみるのは最も理解に繋がります。
最小構成のタグを用意して全てにonclickを付与してどれが拾ってどれが拾わないか。

ただ、「クリック」なので、UX観点からいって、おおよそクリック関係なさそうな雰囲気の要素（デザイン）のものに対してクリックイベントを付与することが良いかどうかは検討した方が良いと思います。

Answer 2

どのタグにもtype="bottom" をつければonClickイベントが使えるようになるのでしょうか？

付けなくても使えます。<div>や<span>など、ユーザーに表示されるタグであればどれでもonClickが有効です。

Answer 3

• レイヤーの下になっていてさわれない
• disabledになっていて反応しない

など特殊な場合を除きHTML要素はクリックイベントを実装可能です。

Comments

[退会済みユーザー]

重なってようが実装は可能かと、直接実行可能かどうかの問題で

[yambejp]

うーん、解釈のちがい。実装＝使えるように機能を付加することなので
反応しないような機能付加は実装といわないと思っています

[退会済みユーザー]

機能として表示レイヤーの変更が発生させる場合がありますから実行不可な状態でも実装は可能

[yambejp]

別にそう解釈したなら、もうそれでいいです