【jQuery】ツールチップ｜表示は特定要素・非表示はどこをクリックしても非表示になるようにしたい

Question

標題の通り、サンプルの仕様は以下の通りです。

　　<style>
    .tooltip {
        display: none;
    }
    .tooltip.is-active {
        display: block;
        width: 100px;
        height: 100px;
        background: #000;
    }
　　</style>
    <div class="tp">
        ほげ
    </div>
    <div class="tooltip">
        ほげ
    </div>
    <script>
        $(function() {
            $(document).on('touchend', function(e) {
                if($('.tooltip.is-active').length) {
                    $('.tooltip').removeClass('is-active');
                }
            });
            $('.tp').on('touchend', function() {
                $('.tooltip').addClass('is-active');
            });
        })
    </script>

仕様

①ほげがタッチされたら、tooltipを表示させる。
②画面のどこがをタッチした場合は、tooltipは非表示になる。

わからない点

②画面のどこがをタッチした場合は、tooltipは非表示になる。が再現できません。
現状コードだと、全てremoveCkassの判定に合致してしまいタッチしてもis-activeが付与されていない
ことは何となくわかるのですが、対処法がわかりません

ご教授のほどお願いいたします。

Answer 1

イベントをdocumentに伝えないようにすればよいです。

        $(function() {
            $(document).on('touchend click', function(e) {
                if($('.tooltip.is-active').length) {
                    $('.tooltip').removeClass('is-active');
                }
                console.log(0);
            });
            $('.tp').on('touchend click', function(e) {
                $('.tooltip').addClass('is-active');
                console.log(1);
                return false;
            });
        })
```**動くサンプル：**[https://jsfiddle.net/wfg9suL7/](https://jsfiddle.net/wfg9suL7/)

---

【バブリング(伝達) jQuery - Qiita】
[https://qiita.com/neoki/items/8be69ec267f997e870bf](https://qiita.com/neoki/items/8be69ec267f997e870bf)

【jQuery のバブリング、preventDefault() や stopPropagation() の使用例 ｜ Tips Note by TAM】
[https://www.tam-tam.co.jp/tipsnote/javascript/post5050.html](https://www.tam-tam.co.jp/tipsnote/javascript/post5050.html)

Comments

[decteckaaaaaaaa]

ご回答ありがとうございます！
参考リンクもいただき、大変わかりやすかったです。

本件とは直接関係ないのですが、、、
$('.tp').on('touchend click', function(e) {
touchend click両方設定した方が良いのでしょうか？？

[kei344]

> 両方設定した方が良いのでしょうか？？
いえ、PCで確認しやすいように追加しただけです。挙動に問題が無いのであれば削除してください。

[decteckaaaaaaaa]

ご返信ありがとうございます！

>いえ、PCで確認しやすいように追加しただけです。挙動に問題が無いのであれば削除してください。
なるほど、、、細かい点なのですが、
挙動的に問題ないのであれば
$('.tp').on('touchend click', function(e) {
とはせずに
$('.tp').on('click', function(e) {
のようにイベントをまとめてしまった方が良かったりするのでしょうか？
とした方が良いのでしょうか？

[kei344]

別にそんなことはありません。どのイベント時に必要かで判断してください。

[decteckaaaaaaaa]

>どのイベント時に必要かで判断してください。
ご回答ありがとうございました！