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

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

ただいまの
回答率

90.49%

  • JavaScript

    16960questions

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

  • jQuery

    6915questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

JavaScriptのクリックイベント時にクリック対象が複数ある場合の処理について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,539

Smar

score 32

いつもお世話になります。
js、jQueryに関して質問です。

現在、テーブルの行をクリックした際にその列の色を変える、というものを作成中です。
(正確にはdatatablesのライブラリを使用して選択される行は常に1行のみ、という形にしています。)

<tr>のクリックイベントの関数内にてクラスをremoveまたはaddすることで配色の変更自体は問題なく動いたのですが、
追加条件としてその行内に含まれるチェックボックスをクリックした時だけは色を変えない、という処理を行いたいのです。

<tr>のクリックイベント関数内にてチェックボックスがクリックされた場合は除外にてreturn、のようにしてみたのですが、どうもうまく動きません。

$(function() {

    var table = $('#example').DataTable();

    $('#example tbody').on( 'click', 'tr', function () {

        // ここでチェックボックスクリック時だけreturn?
        // ここでのif文の書き方が悪いかとは思っているのですが…

        if ( $(this).hasClass('selected') ) {
            // クリックされた行が選択中の処理
        } else {
            // クリックされた行が未選択の処理
        }

    } );

} );

ざっくりなサンプルですいません…。

datatablesのクリックにての1行選択はそのまま以下のものを使用しました。
https://datatables.net/examples/api/select_single_row.html

どなたかお力をお貸しください。

※追記です※

テーブル状態はほぼサンプル状態ではありますが、例えば以下のような形になります。

<table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>-</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="chk_1" id="chk_1" value="chk_1"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk_2" id="chk_2" value="chk_2"></td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr class="selected">
            <td><input type="checkbox" name="chk_3" id="chk_3" value="chk_3"></td>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk_4" id="chk_4" value="chk_4"></td>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
    </tbody>
</table>

よろしくお願い致します。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • think49

    2016/04/04 22:49

    発想は間違っていないと思うのでその延長線でコードを書きますが、table要素のサンプルを下さい。HTMLをこちらで用意するのは少し手間がかかります。

    キャンセル

  • Smar

    2016/04/05 09:25

    コメントありがとうございます。 ほぼサンプル状態ではありますが、テーブル概要を追記致しました。 よろしくお願い致します。

    キャンセル

  • think49

    2016/04/05 21:10

    回答しました。ところで、HTML/CSS/JSはmarkdown記法を使うと読みやすいように整形されます。https://teratail.com/help

    キャンセル

  • Smar

    2016/04/06 09:47

    markdownの件、ご指摘ありがとうございます。 今まで全く知らず投稿しておりました…。

    キャンセル

回答 2

+1

あまりスマートじゃないかもですが、イベントバブリングを止めてしまえばいいのではないかと思いました。

$(function() {

    var table = $('#example').DataTable();

    $('#example').on( 'click', 'tr', function () {  //その2
        if ( $(this).hasClass('selected') ) {
            // クリックされた行が選択中の処理
        } else {
            // クリックされた行が未選択の処理
        }
    } );
    $('#example tbody').on( 'click', 'input', function (e) {  //その1
        e.stopPropagation();
    } );

} );


コードは適切に直して使ってほしいです。


難しいことはしていないので大丈夫かと思いますが、念のため簡単に解説します。

テーブル内をクリックした時に発生するイベント処理は、その1、その2の順になります。これは#exampleよりも#example tbodyの方が、クリックされた要素から見て内側にあるからです。
そこで、その1のイベント処理が発生した時にstopPropagationメソッドでイベントバブリングを止めてしまえば、その2のイベント処理まで伝播せず、イベント処理が止まる、ということです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/05 09:14

    ありがとうございます!
    テストにて動作確認できました!

    内側から外側に~であればこういった途中停止というやり方もあるんですね…。
    勉強になりました、ありがとうございます。

    キャンセル

checkベストアンサー

0

event.target で例外処理を作れば良いと思います。
(jQuery#on は第二引数を指定すると event.currentTarget (this) を書き換える仕様なんですね。DOM Events とは異なる処理で少し戸惑いました…。)

<table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>-</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="chk_1" id="chk_1" value="chk_1"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk_2" id="chk_2" value="chk_2"></td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr class="selected">
            <td><input type="checkbox" name="chk_3" id="chk_3" value="chk_3"></td>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk_4" id="chk_4" value="chk_4"></td>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
'use strcit';
jQuery('#example').on('click', 'tr', function (event) {
  var target = event.target, tr;

  if (target.tagName === 'INPUT' && target.type === 'checkbox') {
    return;
  }

  tr = jQuery(this);

  if (tr.hasClass('selected')) {
    tr.removeClass('selected');
    console.log('selected');
  } else {
    tr.addClass('selected');
    console.log('not selected');
  }
});
</script>

Re: Smar さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/06 13:10

    ありがとうございます。
    `event.target`での分岐、勉強になりました。
    こちらの方法ですとcheckboxやinput以外の何かでまた同じようなことをさせたい場合でも細かく例外処理を作れそうですね。

    マークダウンの件もありがとうございました。

    キャンセル

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

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16960questions

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

  • jQuery

    6915questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。