- ベストアンサー
クリックファンクションがうまくいかない
- クリックファンクションがうまくいかない
- 親divについていると子にある要素をクリックしても親をクリックしたことになってしまうのでしょうか？そうであれば検索ボックスを選択した時だけ実行されないようにするにはどうしたらよいのでしょうか？jqueryを使っています。
- クラス名drawermenuをクリックしたときにドロワーメニューが出たり消えたりする作りなのですが、リストの中にグーグルサイト内検索を入れたところ検索しようと検索ボックスを選択するとドロワーメニューが消えてしまいます。
- okweb12345
- お礼率64% (227/350)
- JavaScript
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
stopPropagationもpreventDefaultもJavascript標準の関数で、それぞれはたらきが違いますよ。 余裕があれば、じっくり読んでみてください。 https://qiita.com/madobon/items/9a93ea830f093b1dca4f https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault
その他の回答 (4)
- ndo
- ベストアンサー率100% (3/3)
以下は、簡易的なサンプルですが意図通り動きますよ。 どうしても無理なら、別のスクリプトやライブラリが干渉してるのかもしれませんね。 ``` <html> <style> .drawermenu ul{ display: none; } .drawermenu.showmenue ul{ display: block; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <nav> <div id="js-drawermenu-button-animation" class="drawermenu"> メニュー <ul> <li class="drawermenu__item"> 閉じてもいいリスト </li> <li class="drawermenu__item not_close"> <form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank"> <div> <input type="hidden" name="cx" value="" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="55" /> <input type="submit" name="sa" value="検索" /> </div> </form> </li> </ul> </div> </nav> <script> $(function(){ $('.drawermenu').on('click', function() { $('.drawermenu').toggleClass('showmenue'); }); }); $('.drawermenu .not_close').on('click', function(event) { event.stopPropagation(); }); </script> </html> ```
- ndo
- ベストアンサー率100% (3/3)
閉じさせたくない要素に付けるのですから、 <li class="drawermenu__item not_close"><!-- ココではなく --> </li> <li class="drawermenu__item"><!-- コチラにnot_closeを付けないとでだめですよ --> <form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank"> --- （ちなみにご承知とは思いますが、「not_close」は単なるクラスの名前なので、自分で決めた任意のクラス名でもいいですよ）
お礼
ありがとうございます。 下記のようにしたのですがやはりinputをクリックするとドロワーメニューが閉じてしまいます。要するにそのliをクリックしても閉じないでほしいliにクラスを付ければいいのでですよね？ ＞＞＞ <li class="drawermenu__item not_close"> <form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank"> <div> <input type="hidden" name="cx" value="partner-pub-" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="55" /> <input type="submit" name="sa" value="検索" /> </div> </form> <script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&lang=ja"></script> </li>
- ndo
- ベストアンサー率100% (3/3)
コメントいただいたので補足します。 適当なクラス（ここでは「not_close」）を付与して指定すれば、そこだけ親へのイベント伝播を止められますよ。 ``` <li class="drawermenu__item not_close"><!-- ←ココ --> <form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank"> <!-- 中略 --> </li> ``` ```js $('.drawermenu .not_close').on('click', function(event) { // ←ココ event.stopPropagation(); }); ```
お礼
そのメソッドを指定した要素は伝播が無くなるのですね
補足
<nav> <div id="js-drawermenu-button-animation" class="drawermenu"> <ul> <li class="drawermenu__item not_close"> </li> <li class="drawermenu__item"> <form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank"> <div> <input type="hidden" name="cx" value="" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="55" /> <input type="submit" name="sa" value="検索" /> </div> </form> <script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&lang..."></script> </li> </ul> </div> </nav> ｊｓ $(function(){ $('.modal-button-wrap, .drawermenu').on('click', function() { $('.drawermenu').toggleClass('showmenue'); }); }); $('.drawermenu .not_close').on('click', function(event) { // ←ココ event.stopPropagation(); }); 上記のようにしたのですが、やはりliをクリックするとドロワーメニューが閉じてしまいます。まだどこか違うでしょうか？
- ndo
- ベストアンサー率100% (3/3)
>親divについていると子にある要素をクリックしても親をクリックしたことになってしまうのでしょうか？ はい、そうです。 とりあえず、リストの要素をクリックしても、.drawermenuのイベントハンドラを実行させないようにするには、以下のようにします。 ``` $(function(){ $('.drawermenu').on('click', function() { $('.drawermenu').toggleClass('showmenue'); }); }); // これを追記 $('.drawermenu ul').on('click', function(event) { event.stopPropagation(); }); ``` （参考） https://qiita.com/hosomichi/items/49500fea5fdf43f59c58
お礼
$('.drawermenu ul').をクリックした際のイベントを止めることが出来るのですね。 するとこれでul全体が押しても何も起きなくなるという事ですね。 するとサイト内検索のliだけを押しても動かないようにしたい場合はこのliにのみ実行すればよいのでしょうか？ それでも親ulも止めないと無理なんですかね。 できればそのliだけ動かないようにしてul全体では動かしたかったのですが無理ならあきらめてそのようにします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ありがとうございます。 おかげさまでできました。 生のjsでも同じ関数があるようですね。違いはevent変数を自分で定義しないといけないのと古いIEでは使えないことくらいですかね？// イベントハンドラ var eventHandler = function(e){ // preventDefaultが実装されていないIE8以前のブラウザ用 var e = e || window.event; // preventDefaultが実装されているブラウザ用 if (e.preventDefault) { e.preventDefault(); } // preventDefaultが実装されていないIE8以前のブラウザ用 if (e.returnValue) { e.returnValue = false; } };