下記のようなhtmlとjs実装をしたところ、"resize"した後に「ボタン」をクリックすると、"resize"した回数分のイベントが発生してしまいました。
イベントバブリングというものによるものだと思い、コメントアウトした場所にevent.stopPropagation()を入れたのですが、止まりませんでした。
どこにevent.stopPropagation()を入れたらいいのでしょうか?
<!DOCTYPE html> <html> <head> <title>test</title> <style type="text/css"> ul { list-style: none; width: 80%; height: 150px; margin: 100px auto 0; padding: 0; background-color: #F8F8F8; overflow: hidden; } li { width: 100%; height: 50px; text-align: center; background-color: #87CEFA; border: 1px solid #333; box-sizing: border-box; } button { display: block; width: 80%; height: 50px; margin: 0 auto; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <ul> <li>test 1</li> <li>test 2</li> <li>test 3</li> <li>test 4</li> <li>test 5</li> <li>test 6</li> <li>test 7</li> </ul> <button class="more">ボタン</button> <script type="text/javascript" src="./app.js"></script> </body> </html>
//app.js $(window).on('load resize', function(){ getArrList(); giveHeight(); $('.more').on('click',function(){ getArrList(); giveHeight(); console.log('clicked !!'); // event.stopPropagation(); }); function getArrList(){ console.log("in getArrList"); // event.stopPropagation(); }; function giveHeight(){ console.log("in giveHeight"); // event.stopPropagation(); }; // event.stopPropagation(); });
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/03/28 10:06