クリックファンクションがうまくいかない
- クリックファンクションがうまくいかない
- 親divについていると子にある要素をクリックしても親をクリックしたことになってしまうのでしょうか？そうであれば検索ボックスを選択した時だけ実行されないようにするにはどうしたらよいのでしょうか？jqueryを使っています。
- クラス名drawermenuをクリックしたときにドロワーメニューが出たり消えたりする作りなのですが、リストの中にグーグルサイト内検索を入れたところ検索しようと検索ボックスを選択するとドロワーメニューが消えてしまいます。
- ベストアンサー
クリックファンクションがうまくいかない
クラス名drawermenuをクリックしたときにドロワーメニューが出たり消えたりする作りなのですが、リストの中にグーグルサイト内検索を入れたところ検索しようと検索ボックスを選択するとドロワーメニューが消えてしまいます。 親divについていると子にある要素をクリックしても親をクリックしたことになってしまうのでしょうか？ そうであれば検索ボックスを選択した時だけ実行されないようにするにはどうしたらよいのでしょうか？jqueryを使っています。 <nav> <div id="js-drawermenu-button-animation" class="drawermenu"> <ul> <li class="drawermenu__item"> </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'); }); });
- 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全体では動かしたかったのですが無理ならあきらめてそのようにします。
関連するQ&A
- ブログのHTMLを、教えてください。
私のブログのHTMLを、評価ソフトでチェックしましたら、下記の２点を重大なミスと指摘されました。 どのように、修正すればいいのか分かりませんので、お分かりでしたら教えてください。 (1)下記につきまして、「</meta>に対応する開始タグ<meta>が見つかりません」と指摘されました。 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /></meta> (2)下記につきまして、「<style>を<div>～</div>内に書くことはできません」と指摘されました。ご存知のように <style type="text/css">以下は グーグルアドセンス ですから、分解はできないと思います。 <div class="side">もし何かお調べ事がありましたら、下記より検索して下さい</div> <div class="kensaku"> <style type="text/css"> @import url(http://www.google.com/cse/api/branding.css); </style> <div class="cse-branding-bottom" style="background-color:#999999;color:#000000"> <div class="cse-branding-form"> <form action="http://www.google.co.jp/cse" id="cse-search-box"> <div> <input type="hidden" name="cx" value="partner-pub-5204993401304693:kui1sxf5o9l" /> <input type="hidden" name="ie" value="Shift_JIS" /> <input type="text" name="q" size="25" /> <input type="submit" name="sa" value="検索" /> </div> </form> </div> 尚、ここHTMLの範囲ではご判断できないようでしたら、著作権で保護されいると思われますので、個別にご必要な限りお知らせいたします。 宜しくお願いいたします。
- 締切済み
- その他(ソフトウェア)
- google検索の結果反映がおかしい
自分のHPにgoogle検索フォームを埋め込んでいたのですが、なぜか急に検索結果がうまく反映されなくなりました。なぜでしょうか。タグがおかしくなったのでしょうか？ 以下はそれです。 <form action="http://www.google.co.jp/search?" target="_blank"><div align="right"><input maxlength=255 size=31 name=q text><input type=hidden value=ja name=hl><input class=inputbtn_1 type=submit value=Google検索 name=btnG></div></form>
- ベストアンサー
- その他([技術者向] コンピューター)
- 携帯向けサイトに検索ボックスを設置したい
携帯向けサイトに検索ボックスを設置したい ホームページビルダーで携帯向けサイトを作っていて、検索ボックスを設置したいと考えております。 google検索ボックスを設置しようと下記のタグをメモ帳に貼ってアップロードしたところ、きちんと表示されるのですが、日本語で入力→検索ボタンを押すと検索ワードが文字化けしてしまいます。英数字のみだと検索可能です。 Google AdSenseを設置している関係で、レンタルサーバー、トップページはindex.phpです。どのようにすれば回避出来ますか？ <img style="vertical-align:middle;" src="http://www.google.com/mobile/images/pb_google.gif" alt="Google" width="124" height="24"/><div><form action="http://www.google.co.jp/m/search"><div><input name="mrestrict" value="xhtml" type="hidden"/><input name="client" value="ms-googlefree" type="hidden"/><input name="safe" value="off" type="hidden"/><input name="channel" value="aHR0cDovL3NhaXRhbWEuNzAzLmpwLw.." type="hidden"/><input name="q" size="15" maxlength="2048" value="" type="text"/><br/><input style="font-size:smaller; margin-bottom:1px;" type="submit" value="Search"/><br/></div></form></div>
- ベストアンサー
- PHP
- 自作Googleの検索ボックスの薄い文字の作り方(サンプル付き)
いつも勉強させていただいております。 今回は質問をさせていただけないでしょうか。 よろしくお願いします。 http://hochi.yomiuri.co.jp/ Google Custom Searchという薄い文字があると思います。 結構おしゃれで、自分のＨＰにも付けようと思っています。 ソースをみると下記のようになっています。 <!-- Google CSE Search Box Begins --> <form id="searchbox_004729702764462794933:_lbkzyf7pac" action="http://hochi.yomiuri.co.jp/contents/cse/searchResults.htm"> <label for="q">サイト内検索</label> <input name="q" id="q" type="text" size="20" /> <input type="submit" name="sa" value="探す" /> <input type="hidden" name="cx" value="004729702764462794933:_lbkzyf7pac" /> <input type="hidden" name="cof" value="FORID:9" /> </form> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_004729702764462794933%3A_lbkzyf7pac"></script> <!-- Google CSE Search Box Ends --> "searchbox_004729702764462794933:_lbkzyf7pac"の文字列は何か登録をしないと、もらえないのでしょうか？ 他のＨＰを見ても、この文字列だけ違っているようです。 ご存知の方がいたら教えていただければと思います。
- ベストアンサー
- ホームページ作成ソフト
- javascript 問題と答え
独学でjsをやっているのですが、わからないところがあるので質問させてください。 ラジオボタンを選択し、解答ボタンクリックで、オレンジの欄に解答が出るようなプログラムを書いたのですが、実行されません。どこが間違っているのでしょうか。 /* ---------------- ▽▽▽ここから▽▽▽ -------------------------- */ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js問題</title> <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0;padding:0; } img{ border:0; } h1 { font-size:22px; } h2 { font-size: 12px; } #box { width: 500px; overflow:hidden; /*子要素にfloatがあり、高さ算出のため使用*/ } div.box { width: 150px; float: left; background-color: #CCC; margin-left: 10px; } li { list-style:none; } div#ans { width: 500px; height: 20px; clear:both; margin-top: 20px; margin-bottom: 30px; } div#ans p { width: 150px; background-color: #FC6; margin-left:10px ; float:left; } div#ans_btn { width: 200px; clear:both; margin-left:200px; } </style> </head> <body> <h1>Q.問題</h1> <br /> <div id="box"> <div class="box"> <ul> <h2>問題その１</h2> <li><input type="radio" name="q0" value="1">あいうえお</li> <li><input type="radio" name="q0" value="2">正解</li> <li><input type="radio" name="q0" value="3">あいうえお</li> <li><input type="radio" name="q0" value="4">あいうえお</li> </ul> </div> <div class="box"> <ul> <h2>問題その2</h2> <li><input type="radio" name="q1" value="1">あいうえお</li> <li><input type="radio" name="q1" value="2">あいうえお</li> <li><input type="radio" name="q1" value="3">正解</li> <li><input type="radio" name="q1" value="4">あいうえお</li> </ul> </div> <div class="box"> <ul> <h2>問題その3</h2> <li><input type="radio" name="q2" value="1">正解</li> <li><input type="radio" name="q2" value="2">あいうえお</li> <li><input type="radio" name="q2" value="3">あいうえお</li> <li><input type="radio" name="q2" value="4">あいうえお</li> </ul> </div> </div> <div id="ans"> <p>問い１答え</p> <p>問い2答え</p> <p>問い3答え</p> </div> <div id="ans_btn"> <input type="button" value="ここを押すと解答" onClick="saiten()"> </div> <script type="text/javascript"> var ans = ["2","3","1"]; function saiten(){ var p_node=document.getElementsByTagName("p"); for(var i=0;i<ans.length;i++){ if(ans[i]==document.getElementById("q"+i).value){ p_node[i].innerHTML = "正解"; }else{ p_node[i].innerHTML = "間違い"; } } } </script> </body> </html> /* ----------------△△△ここまで△△△------------------------ */ よろしくおねがいします。
- ベストアンサー
- JavaScript
- FC2掲示板をトピック一覧表示型にカスタムするには
FC2の掲示板をカスタムしようと考えています。 テンプレート設定で自作のHTMLソースを使いたいと思っていますが、 スレッド型(http://bbs01.bbs.fc2.com/)ではなくトピック一覧表示型(http://bbs02.bbs.fc2.com/)にカスタムしたいのですが、記事表示部のHTMLソースの記入がわかりません。ご存知の方がいらっしゃいましたら、ご教授お願いします。 【変更前（スレッド型）HTML】 <!--thread_area--> <!--記事表示部--> <div class="thread_wrapper"> <!--parent_area--> <div class="parent_article"> <div> <span class="title"><%p_article_title></span> - <%p_article_name> <!--email_area--><a href="mailto:<%p_article_email>">E-mail</a><!--/email_area--> <!--site_area--><a href="<%p_article_site>">Site</a><!--/site_area--> <!--new_area--><img src="<%setting_newimage>"><!--/new_area--> </div> <div class="date"><%p_article_date></div> <div class="contents"> <!--icon_area--> <div><img src="<%p_article_icon_url>" /></div> <!--/icon_area--> <div class="body" style="color:<%p_article_color>;"><%p_article_body></div> <!--image_area--> <!--with_thumbnail--><a href="<%fullimage_url>"><img src="<%thumbnail_url>" class="userimage" /></a><!--/with_thumbnail--> <!--without_thumbnail--><img src="<%fullimage_url>" class="userimage" /><!--/without_thumbnail--> <!--/image_area--> </div> <div class="panel"> <form action="<%form_action>" method="POST"> <input type="hidden" name="act" value="reply" /><input type="hidden" name="tid" value="<%tid>" /><input class="button" type="submit" value="返信" /> </form> <form action="<%form_action>" method="POST"> <input type="hidden" name="act" value="edel" /><input type="hidden" name="sub_act" value="edit_form" /><input type="hidden" name="mid" value="<%mid>" /><input class="button" type="submit" value="編集" /> </form> <form action="<%form_action>" method="POST"> <input type="hidden" name="act" value="edel" /><input type="hidden" name="sub_act" value="delete" /><input type="hidden" name="mid" value="<%mid>" /><input type="hidden" name="tid" value="<%tid>" /><input class="button" type="submit" value="削除" /> </form> </div> </div> <!--/parent_area--> <!--children_area--> <div class="child_article"> <div> <span class="title"><%c_article_title></span> - <%c_article_name> <!--email_area--><a href="mailto:<%c_article_email>">E-mail</a><!--/email_area--> <!--site_area--><a href="<%c_article_site>">Site</a><!--/site_area--> </div> <div class="date"><%c_article_date></div> <div class="contents"> <!--icon_area--> <div><img src="<%c_article_icon_url>" /></div> <!--/icon_area--> <div class="body" style="color:<%c_article_color>;"><%c_article_body></div> <!--image_area--> <!--with_thumbnail--><a href="<%fullimage_url>"><img src="<%thumbnail_url>" class="userimage" /></a><!--/with_thumbnail--> <!--without_thumbnail--><img src="<%fullimage_url>" class="userimage" /><!--/without_thumbnail--> <!--/image_area--> </div> <div class="panel"> <form action="<%form_action>" method="POST"> <input type="hidden" name="act" value="edel" /><input type="hidden" name="sub_act" value="edit_form" /><input type="hidden" name="mid" value="<%mid>" /><input class="button" type="submit" value="編集" /> </form> <form action="<%form_action>" method="POST"> <input type="hidden" name="act" value="edel" /><input type="hidden" name="sub_act" value="delete" /><input type="hidden" name="mid" value="<%mid>" /><input type="hidden" name="tid" value="<%tid>" /><input class="button" type="submit" value="削除" /> </form> </div> </div> <!--/children_area--> </div> <!--/記事表示部--> <!--/thread_area-->
- 締切済み
- HTML
- １つのformで複数のactionを実行できますか？
フォーム内に商品の購入ボタンがあります。同じフォーム内に商品名でグーグルのサイト内を検索させるボタンを設置し、横に並べることは可能ですか？ フォームの入れ子はよくないようなので、検索をJava scriptでできればよいのですが・・・ スタイルシートではデザイン上無理でした。 <form id="fm" name="fm" action="URL" method="POST"> <input type="hidden" name="shouhinmei" value="商品名"> <input type="hidden" name="kakaku" value="500"> <input type="image" src="kounyuu.gif value="購入"> <form method=get action="http://www.google.co.jp/search"> <input type=hidden class="q" name=q value="商品名"><input type=hidden name=ie value=UTF-8><input type=hidden name=oe value=UTF-8><input type=hidden name=hl value="ja"><input name=btnG type="image" src="検索.gif value="検索"><input type=hidden name=sitesearch value="サイトのURL"></form> </form> </form> +----+ +----+ |購入| |検索| +----+ +----+
- ベストアンサー
- JavaScript
- 大量のチェックボックス状態取得について
質問させてください。 以下のようなHTML構造で連続している場合、 ID内全体のチェックボックスの状態を取得し、未チェックの物を非表示するにはどのようにすれば一番処理速度が速いのでしょうか？ <div id="hoge1"> <ul> <li> <ul class="Parents"> <li class="child"><input type="checkbox" name="AAA"></li> <li class="child"><input type="checkbox" name="BBB"></li> <li class="child"><input type="checkbox" name="CCC"></li> <li class="child"><input type="checkbox" name="DDD"></li> </ul> </li> <li> <ul class="Parents"> <li class="child"><input type="checkbox" name="AAA"></li> <li class="child"><input type="checkbox" name="BBB"></li> <li class="child"><input type="checkbox" name="CCC"></li> <li class="child"><input type="checkbox" name="DDD"></li> </ul> </li> ～～～～～～～～～～～～ ※繰り返し ～～～～～～～～～～～～ </ul> </div> 現在はjQueryで$ (ul.Parents li.child)で全体をラップし、for文のループ内で$eq()で１件毎chekedを参照し、.hide()を行っています。 動作自体は問題ないのですが、処理速度の遅さが気になっています。 速い方法でればjQueryを使用しない方法でもかまいません。 どうかよろしくお願い致します。
- ベストアンサー
- JavaScript
- ボタン別でフォームの送信先を変えたい
同じ場所に3つある今のフォームを1つにまとめたいのですが、 「ラジオボタン」でやるのではなく「submitボタン」によって送信先の振り分けはできないのでしょうか？ CGIなどを使って一旦クッションを置くのは問題ないです。何か参考になるサイトさんとかありましたら教えてください。 <form action="1.php" method="get" class="form" target="a" name="1"> <input type="hidden" name="s" value=90 /> <input type="hidden" name="t" value="e" /> <input type="text" name="moji" value="" size="8" /> <input type="submit" name="button" value="検索" /> </form> <form action="http://e.php" method="get" name="2" target="a"> <input type="hidden" name="test" value=et /> <input type="text" name="77" value="" size="8" /> <input type="submit" value="検索2" class="button" /> </form> <form action="http://8.cgi" method="get" target="a"> <input type="text" size="8" name="q" value="" /> <input type="submit" value="検索3" class="button" /> <input type="hidden" name="sut" value="JJ" /> </form>
- ベストアンサー
- CGI
- 自作の検索エンジンを作りたいんですが
<form action="http://www.amazon.co.jp/exec/obidos/external-search" target="_blank"> <input type=text name="keyword" size=31 maxlength=255 value=""> <input type="hidden" name="encoding-string-jp" value="日本語" /> <input type="hidden" name="mode" value="blended" /> <input type="hidden" name="tag" value="jojoagogo09-22" /> <form> と <form action="http://www.google.co.jp/search"> <input type=text name=q size=31 maxlength=255 value=""> <input type=hidden name=ie value=UTF-8> <input type=hidden name=oe value=UTF-8> <input type=hidden name=hl value="ja"> をくっつけて、１つのtextボックスからどっちで検索するかラジオボタンで選択してから検索ボタンで検索できるようにしたいです。 やり方だけでも構いませんが、もしよろしければサンプルや実際にくっつけたタグを回答していただけると凄く助かります。 どうかお願いします。
- 締切済み
- HTML
お礼
ありがとうございます。 おかげさまでできました。 生の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; } };