質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

4067閲覧

trタグをリンクにした際に、その中のボタン要素だけを押せるようにしたい

hiroakitajima

総合スコア27

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/12/27 13:44

タイトル分かりづらくて申し訳ございません。

trがリンクになるようにjavascriptで指定し、その中にボタンを配置しています。
上記コードだとdata-hrefとdata-remodal-targetが両方起動してしまいます。
ボタンのdata-remodal-targetのみ動くようにするにはどうしたらよいでしょうか。
何卒よろしくお願いいたします。

html

1<tr data-href="detail.php"> 2 <td> 3 <button class="btn_" data-remodal-target="modal_adminreview">ボタン</button> 4</td>

javascript

1 $('tr[data-href]').addClass('clickable').click( function() { 2 window.location = $(this).attr('data-href'); 3 }).find('a').hover( function() { 4 $(this).parents('tr').unbind('click'); 5 }, function() { 6 $(this).parents('tr').click( function() { 7 window.location = $(this).attr('data-href'); 8 }); 9 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

中身だけ実行する場合はstopPropagation()を利用します

javascript

1<script> 2$(function(){ 3 $('#hoge').on('click',function(){ 4 console.log('hoge'); 5 }); 6 $('#fuga').on('click',function(e){ 7 e.stopPropagation(); 8 console.log('fuga'); 9 }); 10 $('#piyo').on('click',function(){ 11 console.log('piyo'); 12 }); 13}); 14</script> 15 16<div id="hoge"> 17<input type="button" value="fuga" id="fuga"> 18<input type="button" value="piyo" id="piyo"> 19</div>

stopPropagationした#fugaはfugaだけしか表示されません
一方#piyoは#hogeにさかのぼって実行されます

投稿2018/12/28 00:44

編集2018/12/28 00:44
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こんな感じでどうでしょう。

js

1 $('tr[data-href]').addClass('clickable').click( function( e ) { 2 if ( e.target.tagName === 'BUTTON' ) return; 3 window.location = $(this).attr('data-href'); 4 }).find('a').hover( function() { 5 $(this).parents('tr').unbind('click'); 6 }, function() { 7 $(this).parents('tr').click( function() { 8 window.location = $(this).attr('data-href'); 9 }); 10 });

【element.tagName | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/tagName

【event.curretTargetとevent.targetの違い - gsol-dev's blog】
http://gsol.hatenablog.com/entry/2013/12/04/event.curretTarget%E3%81%A8event.target%E3%81%AE%E9%81%95%E3%81%84

投稿2018/12/27 14:40

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問