[解決済み] event.targetを使用して、要素の親要素をターゲットにすることができますか?
2022-05-13 14:25:56
質問
自分のページのinnerHTMLを、クリックした要素のinnerHTMLになるように変更しようとしています。
<section class="homeItem" data-detail="{"ID":"8","Name":"MacBook Air","Description":"2015 MacBook A…"20","Price":"899","Photo":"Images/Products/macbookAir.png"}"></section>
javascriptで記述したコードです。
function selectedProduct(event){
target = event.target;
element = document.getElementById("test");
element.innerHTML = target.innerHTML;
}
は、クリックした特定の要素をターゲットにします。
のどこかをクリックしたときに、その要素をターゲットにするようにしたい。
<section>
要素のどこかをクリックしたときに、クリックした特定の要素ではなく、要素全体の innerHTML を取得することです。
私はそれがクリックされたものの親要素を選択することに関係するものであると推測しますが、私は確信がなく、オンラインで何かを見つけることができません。
可能であれば、私はJQueryから離れたいと思います。
どのように解決するのですか?
私は、あなたが必要とするものは
event.currentTarget
. これは、実際にイベントリスナーを持つ要素を含むことになります。ですから、もし全体の
<section>
がイベントリスナーを持つ場合
event.target
がクリックされた要素になり
<section>
は
event.currentTarget
.
その他
parentNode
は、あなたが探しているものであるかもしれません。
関連
-
[解決済み] JavaScriptで配列の先頭に新しい配列要素を追加するにはどうすればよいですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] jQueryで名前を指定して要素を選択するには?
-
[解決済み] DOM要素が現在のビューポートで表示されているかどうかを確認するにはどうすればよいですか?
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み] JavaScriptでURLの#hashを確認する方法は?
-
[解決済み】JavaScriptで文字列をBase64にエンコードするにはどうすればいいですか?
-
[解決済み] [Solved] 'blur'イベントが発生したとき、フォーカスがどの要素に*行ったかを調べるにはどうすればよいですか?
-
[解決済み] クリックされた要素を(文書全体に対して)取得する方法は?
-
[解決済み] truthy や falsy を明示的なブール値、すなわち True や False に変換する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] jQuery scroll() は、ユーザーがスクロールを止めたことを検出する。
-
[解決済み] font-faceフォントのプリロード?
-
[解決済み] javascriptからフィールドを無効とすることはできますか?
-
[解決済み] jQueryを使用してAJAXリクエストに失敗した場合に再試行する最善の方法は何ですか?
-
[解決済み] コンソールで変数のトレースを行う場合、どのように改行すればよいのでしょうか?
-
[解決済み] JavaScriptのswitch文で厳密な比較を仮定するのは安全ですか?
-
[解決済み] Javascript 確認ポップアップの「OK」「キャンセル」の代わりに「はい」「いいえ」ボタン
-
[解決済み] 特定のクラスを持たない要素を選択する方法
-
[解決済み] Firefox で ES2015 のインポートが機能しない(トップレベルでも)。