Twitter Bootstrapのドロップダウンメニューがタップできない場合の対処法

Tweet

タッチデバイス（iPhone, iPad等のiOS端末、およびAndroid）で、Twitter Bootstrapのドロップダウンメニューが機能しなかったので、調査したときのメモ。端末ではなく、Twitter Bootstrap側に原因がありました。
参考：Twitter Bootstrap

環境

環境は以下の通りです。

ソフトウェア

実行環境

ドロップダウンメニューについて

TwitterBootstrapのドロップダウンメニューは、CSSの dropdownクラスと、 bootstrap-dropdown.jsまたは包括ライブラリ bootstrap.jsを使って簡単に実装できます。
参考：Dropdowns bootstrap-dropdown.js

以下の例では、ヘッダナビゲーションバーと組み合わせて、ドロップダウンメニューを利用しています。@usernameをクリックすると内包されているメニューが表示されます。

以下の例では、上記に加えて、スマートフォンやタブレット向けの画面で利用することの多い collapseクラスと組み合わせています。最初に表示されるのは一番上の1行だけで、右のアイコンをクリックすると内包されている3行が表示され、さらに@usernameをクリックするとログアウトの行が表示されるといった具合です。

問題点と対処法

PCでは問題なく表示・動作します。しかし、タッチデバイスでは、表示はうまくいくのですが、動作がうまくいきません。具体的には、ログアウトをタップしようとするとドロップダウンメニューが閉じてしまいます。上記の2例ともに同様です。

解決策はないものかと、GitHubのIssuesをあさっていたら、同様の報告が上がっていました。
参考：Button dropdown links don’t work on mobile (android, iOS)
参考：Button Dropdown Menu Items not clickable on iPhone

色々と解決方法も上がっていますが、以下の方法が一番スマートかなと思いましたので紹介します。

I’m on the same issue. probably fixed in this code for a while.
Add this after line 144 of js/bootstrap-dropdown.js:
.on('touchstart.dropdown.data-api', '.dropdown-menu', function(e) { e.stopPropagation() })

引用元：twitter/bootstrap Issue #4756 tkawa commented

bootstrap-dropdown.jsに、以下のコードを1行追加するだけです。（現在のバージョンだと164行目）
参考：bootstrap-dropdown.js – 2.3.0 – GitHub

以上で、完了です。
包括ライブラリ bootstrap.jsを使っている場合は、当該箇所の前後を検索するなりして修正を行ってください。
Issueによると、v.2.1.0から発生している問題のようで、v.2.3.0となった現在でも修正されていません。長らく放置されているようなので、何か他の問題があるのか計り知れませんが、いずれ何らかの形で修正はされると思います。それまでのつなぎとして。