【覚書】サイドバー折り畳みボタン[+][-]を押した後でフォーカスを外す方法
KOROPPYの本棚 : 折りたたみボタンの色を開閉で変えるという記事で、
「＋」と「－」の色は変更出来たものの、クリックするたびに外側のマスに黒のborderが残ってしまうというコメントをみかけ、『あぁ、確かに気になる人は気になるかも……』と思って、対処方法を調べてみました。
とりあえず、
document.onclick=function(e){var t=(e)?e.target:event.srcElement;if(t.className=='switch')t.blur();};
のような1行をサイドバー折り畳みスクリプトの最後の方(*1)に追加すれば、出来そうな感じです。
(*1)//-->行の前に挿入します。
実際にはscript要素内であれば他のところでも構わないのですが、この位置が解りやすいのではないかと。
実際にはscript要素内であれば他のところでも構わないのですが、この位置が解りやすいのではないかと。
折り畳みスクリプトにより表示されるスイッチ([+][-])はbuttonオブジェクトなので、これをクリックするとフォーカスが移って強調表示されて(枠がついて)しまいます。
ですので、上記の記述によりクリックイベントをトラップして、クリックされたオブジェクトのクラス名が"switch"の場合にはフォーカスを外す(blur())処理を行っています。
ですので、上記の記述によりクリックイベントをトラップして、クリックされたオブジェクトのクラス名が"switch"の場合にはフォーカスを外す(blur())処理を行っています。
あまり検証していないため、不具合が発生したらすみません。
ちなみに、KOROPPYの本棚さんでもそうですが、上記のような細工をしなくても、フォーカスが外れる(黒枠がクリックした瞬間しか出ない)サイトも存在します……むしろこちらのほうが不思議だったりします(^^;。
多分、設置されているブログパーツのどれかがフォーカスを(定期的に？)横取りしているのではないか、と推測していますが。
→違いました。折り畳みスクリプト(foldSidebar02c.js)のバージョン違いが原因の模様。
→違いました。折り畳みスクリプト(foldSidebar02c.js)のバージョン違いが原因の模様。
2007/03/04(日) 21:44 | 固定リンク
| 記事の編集(管理者用)
「おもいつき」カテゴリの記事
- 【AutoPagerize】Google 画像検索対応スクリプト(AutoPagerize本体をいじらない版)(2009.04.18)
- ふと気になったどうでもいいこと(2009.11.12)
- TwitDungeon：Twitterでダンジョン巡り？！(2009.10.06)
- 続き物などをまとめて『読んだ4!』に登録する『ぜんぶ読んだ4!』(2009.09.30)
- 【ココログ】過去記事をN件ずつさかのぼって表示するスクリプト(2007.08.29)
「ウェブログ・ココログ関連」カテゴリの記事
- 【ココログ】アーカイブページに目次とページングを付加するJavaScript(2006.07.14)
- 【ココログ】管理画面のURL(sheme)がhttpsからhttpに変わった？(2009.09.17)
- 【ココログ】過去記事をN件ずつさかのぼって表示するスクリプト(2007.08.29)
- 【ココログ】コメント出来ないときに使ってみるブックマークレット(2007.03.27)
- 【ココログ】トップページにコメント欄を表示するスクリプト(2009.06.14)
「パソコン・インターネット」カテゴリの記事
- PCで書道って、実は一般的だった？(2010.01.29)
- 【AutoPagerize】Google 画像検索対応スクリプト更新(ver.0.01f)(2010.01.18)
- 【AutoPagerize】Google 画像検索対応スクリプト(AutoPagerize本体をいじらない版)(2009.04.18)
- 【Excel】色一覧(2006.05.24)
- @niftyのダイナミックDNS IPアドレス更新画面が酷い件(2009.12.02)
「覚書」カテゴリの記事
- 【ココログ】アーカイブページに目次とページングを付加するJavaScript(2006.07.14)
- 【Excel】色一覧(2006.05.24)
- Twitter初入会から4ヶ月後、自分がいかに面倒くさがりであるかを知る。(2009.10.15)
- AmazonのProduct Advertising API認証プロキシ公開(REST)(2009.07.03)
- 【JavaScript】各種色指定用の文字列を16進カラーコード(#xxxxxx)に変換(2007.11.29)
こんにちは。
対応策のレス、ありがとうございました。
助かりました。
普通に設置すればフォーカスは外れるものかと思っていましたが、
私のほうがイレギュラーな動きだったんですね(^^;;
＞多分、設置されているブログパーツのどれかがフォーカスを(定期的に？)横取りしているのではないか、と推測していますが。
昔から変わらず置いているブログパーツとなると、
ブログペットでしょうか。
通常のやり方とは違った貼り付け方をしているので、
そのあたりになにかあったりとか……。
投稿： KOROPPY | 2007/03/05 10:33:09
button要素だからなんですね。なるほど。
確かにフォーカスの枠は気になる人は気になるかもしれませんね…。
あと、こういう風に、document.onclickで処理できるんですね。勉強になりました。
ところで、一つだけ気になったんですが、
t.className&& は不要ですか？
投稿： facet | 2007/03/05 15:58:12
| 普通に設置すればフォーカスは外れるものかと思っていましたが
原因がわかりました……多分。
KOROPPYさんが現在設置されている foldSidebar02c.js と、facet さんのところで公開されているものとで、バージョンが微妙に異なるようですが、このためみたいですね。
KOROPPY さんのところのものだと、_getModuleHeadText() という関数で、H2要素の中身(innerHTML)を直接書きしていますが、このときにスイッチからフォーカスが外れるのだと思われます。
facet さんのところの最新版では、innerHTMLを直接書換えていないので、フォーカスが残ったままになるようです。
投稿： 風柳＞KOROPPY さん | 2007/03/06 1:34:21
| t.className&& は不要ですか？
t.classNameがnullの場合を考えての話でしょうか？
t.className=='switch'の条件にあてはまらないので、大丈夫じゃないかと思いますが……。
＃t&& は必要かもしれませんね……でもイベント発生でコールされているのに、target(またはsrcElement)が取れない場合ってあるのかな？
投稿： 風柳＞facet さん | 2007/03/06 1:41:41
KOROPPYさんちのフォーカスの話。
自分のスクリプトだったとは！(笑) //よく見つけますね、こんなの…(^^;
なんでクリック時に見出し内容をいちいち判定しなくちゃならなかったのか今となっては謎ですけどｗ、innerHTMLによる再描画でフォーカスが外れること自体は、なるほど、そういう実装になっていてもおかしくはないなという気がしました。
フォーカスを外す目的でinnerHTMLで再描画するのはさすがにアレでしょうけど(^^;
それから、t.className&&の話。
これ、昔このスクリプトを作り始めた頃、これを書かないとエラーがでて動作しないことがあったんですよね。なので、全部いちいち if (t.className && t.className== ...) 的に書かされた記憶が。…でも、今のFirefoxだとなくてもエラーがでないですね。知らなかった…
ちょっと実験してみたら、t.nodeType==3になることがないですね…。e.targetの仕様が変わったのか？
投稿： facet | 2007/03/06 22:04:04