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

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

ただいまの
回答率

89.22%

javascriptでイベントを削除する方法

解決済

回答 2

投稿

  • 評価
  • クリップ 3
  • VIEW 2,781
退会済みユーザー

退会済みユーザー

次のように、おはようとおやすみをjavascriptで「ふんわり表示」しているのですが、

<div class="hyoji">表示</div>
  <div class="nakami1">
      <div id="ohayo">おはよう</div>
  </div>
  <div class="nakami2">
      <div id="oyapumi">おやすみ</div>
</div>    
<div class="modosu">戻す</div>
<script>
$('body').on("click",'.hyoji',function(){
  $('.nakami1').fadeIn(1000).delay(3000).fadeOut(1000);
  $('.nakami2').fadeIn(5000).delay(1000);  
});
</script>


この「ふんわり表示」をリセットする方法がわかりません。

次のように書いてもうまくいかないので、間違っているところを教えて頂けませんでしょうか?

<script>
// 「表示」による内容を削除
$('body').on("click",'.modosu',function(){
  $('.nakami1').css('display', 'none');
  $('.nakami2').css('display', 'none'); 
});

// 「表示」によるイベントをリセット★★これがダメ★★
var events = [];
Object.keys($._data($('body').get(0), "events")).forEach(function(k) {
  events[k].forEach(function(o) {
    events.push({
      handler: o.handler,
      selector: o.selector,
    });
  });
});
$(document).off("click", ".hyoji");
</script>


上のコードを書いた実際の動作はこちらです。
https://jsfiddle.net/fosnxn2a/

どうぞ宜しくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

よっ
ちょっと気になって、方法を探しました。
ひとまず、下記のコードは間違えているので、Javascriptは落ちてます。jsが落ちないように。

var events = [];
Object.keys($._data($('body').get(0), "events")).forEach(function(k) {
  events[k].forEach(function(o) {
    events.push({
      handler: o.handler,
      selector: o.selector,
    });
  });
});


上記のコードが要らないから、使ってないです。

下記は私の方法です。

<div class="hyoji">表示</div>
  <div class="nakami1">
      <div id="ohayo">おはよう</div>
  </div>
  <div class="nakami2">
      <div id="oyapumi">おやすみ</div>
</div>    
<div class="modosu">戻す</div>

<script>
$('body').on({
    'click.myevent': function () {
     $('.nakami1').fadeIn(1000).delay(3000).fadeOut(1000);
         $('.nakami2').fadeIn(5000).delay(1000);  
    }
}, '.hyoji');

$('body').on("click",'.modosu',function(){
  $('.nakami1').css('display', 'none');
  $('.nakami2').css('display', 'none'); 
});


$('body').off('click.myevent', '.hyoji');

</script>

:)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/02/07 11:59 編集

    よっ
    fadeInやfadeOutのアニメーションを途中に切って、リセットするのはちょっとやりずらいですので、
    クリックする時に、表示したいHTMLを再作成。そうすると、イベントがリセットされます。

    試してみて:)


    <script>

    var resetNakami = function() {
    $('.nakami1, .nakami2').each(function() {
    var clone = $(this).clone()
    $(this).replaceWith(clone)
    clone.hide()
    })
    }
    $('body').on({
    'click.myevent': function () {
    resetNakami()
        $('.nakami1').stop().fadeIn(1000).delay(3000).fadeOut(1000);
    $('.nakami2').stop().fadeIn(5000).delay(1000);
    }
    }, '.hyoji');

    $('body').on("click",'.modosu', resetNakami)

    </script>

    キャンセル

  • 2018/02/07 14:27

    めっちゃ嬉しいです。できました!!遅くなってしまってすみません。他のコードと組み合わせるのに苦労しておりました。なんとか、、できました。(∩´∀`)∩
    たびたびご返信くださって誠にありがとうございます!!感謝です★

    キャンセル

  • 2018/02/07 14:34

    めっちゃ嬉しい………

    キャンセル

0

要は表示を押下後にアニメーション中に戻るボタンを押下した時、アニメーションを止めて、
再度、表示ボタンを押下しても、最初からアニメーションを行ってほしいということですね?

であれば、簡単なことです。
stop関数には引数を2つ取れます。
一つは、アニメーションキューをクリアするか
もう一つは、直ちにアニメーションを終了の状態にまで持っていくか。

この場合は、戻るボタン押下時に、stop関数の引数に両方ともtrueを指定してアニメーションを直ちに止めて、次のアニメーションも行わないようにして非表示にしてしまえば良いのです。

$('body').on("click",'.hyoji',function(){
  $('.nakami1').fadeIn(1000).delay(3000).fadeOut(1000);
  $('.nakami2').fadeIn(5000).delay(1000);  
$('body').on("click",'.modosu',function(){
  $('.nakami1').stop(true,true).hide();
  $('.nakami2').stop(true,true).hide();  
});

stop関数の詳しい動作については、以下のAPI Documentか、Qiitaの記事を読んでください。

jQuery API Document
Qiita:【jQuery】stopメソッドを理解する

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/02/07 13:49 編集

    $('body').on("click",'.hyoji',function() {}) に stop(true,true)を追加するサンプルを作成しました。ご覧ください :)
    http://study.jeromedupuis.net/teratail/112346/

    キャンセル

  • 2018/02/07 14:05

    なるほど。
    表示ボタンを連続で押下した場合、ということですね。

    キャンセル

  • 2018/02/07 14:32

    LineOfLightningさん
    こんにちは。ご回答どうもありがとうございます。
    おお~、それはシンプルで素敵ですね。

    >表示と戻すを交互に押すだけであれば、大丈夫な気がしますが

    仰るとおりだと思います。

    ただ、実は今回はユーザーがいじくるサイトを作っております。ゆえに、そのように「ちゃんと交互に押してくれる」という状況とは限らなそうです。

    と、いうわけでして、せっかくシンプルなコードを頂戴したのに恐縮ではございますが、今回はjerome.dupuisさんにベストアンサーを譲ってあげてくださいませ。m(_ _)m

    stop関数についてのご説明もありがとうございます。

    キャンセル

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

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