【覚書】サイドバー折り畳みボタン[+][-]を押した後でフォーカスを外す方法
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)のバージョン違いが原因の模様。
« 3/22にココログ(ベーシック・プラス・プロ)のメンテナンス | トップページ | 約3年ぶりの吉野家の牛丼 »
「ウェブログ・ココログ関連」カテゴリの記事
- 久しぶりの投稿がココログへの苦言というのもなんなのですが……(2019.03.20)
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 【覚書】風柳亭（ココログプロ）をレスポンシブWebデザイン化（Bootstrap3使用)(2015.10.09)
- ココログ用全文検索 - ココログ最強検索を jQuery を使って作り直してみた（既知の不具合の幾つかに対応）(2015.09.01)
- 現在に生きるということ。(2013.01.05)
「パソコン・インターネット」カテゴリの記事
- Twitter 原寸びゅー：PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介(2016.02.12)
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
- BIGLOBE光ネクスト(大阪)の通信速度問題 - プロバイダ選びは難しい……(2015.08.13)
- BOOK☆WALKER さんに関して最近経験した不安と不満(2015.08.10)
- 『#鳥獣戯画制作キット』が楽しい(2015.07.01)
「おもいつき」カテゴリの記事
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 神使の兎 ～宇治神社にて～(2016.07.10)
- Twitter 原寸びゅー：PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介(2016.02.12)
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
- 【覚書】風柳亭（ココログプロ）をレスポンシブWebデザイン化（Bootstrap3使用)(2015.10.09)
「覚書」カテゴリの記事
- 鍛高譚 ～ カレイにまつわる物語(2018.05.25)
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 神使の兎 ～宇治神社にて～(2016.07.10)
- Twitter 原寸びゅー：PC版ブラウザ用・Twitterの画像閲覧と保存がはかどる拡張機能の紹介(2016.02.12)
- スマートフォンをPC上の音楽を再生するためのリモコンとして使いたい(2016.01.10)
こんにちは。
対応策のレス、ありがとうございました。
助かりました。
普通に設置すればフォーカスは外れるものかと思っていましたが、
私のほうがイレギュラーな動きだったんですね(^^;;
＞多分、設置されているブログパーツのどれかがフォーカスを(定期的に？)横取りしているのではないか、と推測していますが。
昔から変わらず置いているブログパーツとなると、
ブログペットでしょうか。
通常のやり方とは違った貼り付け方をしているので、
そのあたりになにかあったりとか……。
投稿: KOROPPY | 2007/03/05 10:33
button要素だからなんですね。なるほど。
確かにフォーカスの枠は気になる人は気になるかもしれませんね…。
あと、こういう風に、document.onclickで処理できるんですね。勉強になりました。
ところで、一つだけ気になったんですが、
t.className&& は不要ですか？
投稿: facet | 2007/03/05 15:58
| 普通に設置すればフォーカスは外れるものかと思っていましたが
原因がわかりました……多分。
KOROPPYさんが現在設置されている foldSidebar02c.js と、facet さんのところで公開されているものとで、バージョンが微妙に異なるようですが、このためみたいですね。
KOROPPY さんのところのものだと、_getModuleHeadText() という関数で、H2要素の中身(innerHTML)を直接書きしていますが、このときにスイッチからフォーカスが外れるのだと思われます。
facet さんのところの最新版では、innerHTMLを直接書換えていないので、フォーカスが残ったままになるようです。
投稿: 風柳＞KOROPPY さん | 2007/03/06 01:34
| t.className&& は不要ですか？
t.classNameがnullの場合を考えての話でしょうか？
t.className=='switch'の条件にあてはまらないので、大丈夫じゃないかと思いますが……。
＃t&& は必要かもしれませんね……でもイベント発生でコールされているのに、target(またはsrcElement)が取れない場合ってあるのかな？
投稿: 風柳＞facet さん | 2007/03/06 01:41
KOROPPYさんちのフォーカスの話。
自分のスクリプトだったとは！(笑) //よく見つけますね、こんなの…(^^;
なんでクリック時に見出し内容をいちいち判定しなくちゃならなかったのか今となっては謎ですけどｗ、innerHTMLによる再描画でフォーカスが外れること自体は、なるほど、そういう実装になっていてもおかしくはないなという気がしました。
フォーカスを外す目的でinnerHTMLで再描画するのはさすがにアレでしょうけど(^^;
それから、t.className&&の話。
これ、昔このスクリプトを作り始めた頃、これを書かないとエラーがでて動作しないことがあったんですよね。なので、全部いちいち if (t.className && t.className== ...) 的に書かされた記憶が。…でも、今のFirefoxだとなくてもエラーがでないですね。知らなかった…
ちょっと実験してみたら、t.nodeType==3になることがないですね…。e.targetの仕様が変わったのか？
投稿: facet | 2007/03/06 22:04