kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Reword "mobile" to "touch-enabled" 

...as touch is not exclusive to "mobile" anymore nowadays. also explicitly clarifies this is a fix for iOS, and that it impacts touch laptops etc as well. lastly, renames the variable from "dropdown" to "backdrop" for clarity/consistency
This commit is contained in:
Patrick H. Lauke 2017-04-12 13:54:16 +01:00
parent 29460b2005
commit 3275ca4b30
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/components/dropdowns.md
View File

@ -480,7 +480,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item.
On mobile devices, opening a dropdown adds a `.dropdown-backdrop` as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. **This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.**
On touch-enabled devices, opening a dropdown adds a `.dropdown-backdrop` as a tap area for closing dropdown menus when tapping outside the menu, to work around a quirk in iOS' event delegation. **This means that once a dropdown menu is open, any tap or click (including with a mouse, on a multi-input device such as a laptop with a touchscreen) outside of the menu will be intercepted to close the menu. Opening another dropdown menu, or activating any other control or link, will therefore require an extra tap or click.**
Note: The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.

11
js/src/dropdown.js
View File

@ -112,11 +112,12 @@ const Dropdown = (($) => {
if ('ontouchstart' in document.documentElement &&
!$(parent).closest(Selector.NAVBAR_NAV).length) {
// if mobile we use a backdrop because click events don't delegate
const dropdown = document.createElement('div')
dropdown.className = ClassName.BACKDROP
$(dropdown).insertBefore(this)
$(dropdown).on('click', Dropdown._clearMenus)
// if touch-enabled device we use a backdrop because click events
// don't delegate on iOS - see https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
const backdrop = document.createElement('div')
backdrop.className = ClassName.BACKDROP
$(backdrop).insertBefore(this)
$(backdrop).on('click', Dropdown._clearMenus)
}
this.focus()