Make a mobile page today, click on a button-pop menu, and then click anywhere other than the menu to close the menu, there is no problem in other browsers, but in the iOS browser does not close.
Online to solve this bug a lot of posts, this post is mainly about the principle, here to write a simple code, you can copy to your own page to experiment:
<HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, User-scalable=no"/></Head><Scriptsrc= "Https://code.jquery.com/jquery-3.1.0.min.js"></Script><style>*{Min-height:100px;Line-height:100px;}Body{background:#ddd;}A,input{Display:Block;}Div{background:#9CF;}</style><Body> <ahref="#" >Link </a> <inputtype= "button"value= "button"/> <Div>div or span, etc.</Div></Body></HTML><Script>$("Body"). Bind ("Click",function() {alert ("body is clicked")})</Script>
The above code is not a problem in other browsers, in the iOS browser, click on the links and buttons will have pop-up window, but click Other areas but not.
The reason is because the Windows, document, body of the iOS browser do not accept the Click event, the button and the link accept the Click event
Let's make a metaphor to understand how this event works:
After the screen is clicked, the system sends an event post (click), and the link and button will handle the corresponding behavior after receiving the announcement (such as opening a new page, submitting a form, other user-bound behavior)
window, document, body and will not respond to this announcement, and did not see the same, naturally there is no pop-up window
The body only accepts internal bubbling events, the button's Click event is triggered when the button is clicked, and then the button tells its superior (body): Boss, I was clicked,
The body will say: OK, I will handle, this time the window will come out.
The Div,span and other tags in the body are ignored by default, but we can open them, and they are like buttons, they can accept the Click event and report it to their superiors.
Open method: Bind a tag to an arbitrary event ↓
Adding event properties to the 1.HTML tag
<onMouseOver>div or span </div>< onClick > div or span etc </div > < onKeyDown > div or span </div >
2. Bind an event with JS or jquery
$ ("Body div"). Bind ("click",function() {})So finally our pop-up menu can be written like this
/* Bind events to any element inside the body to allow these tags to accept the Click event */
$ ("body>*"). Bind ("click", Function () {});
$ ("#button"). Bind ("click", Function (e) {/*) bind the button to a point-click event */
$ ("#menu"). Show ();//button click to display menu
$ ("body"). One ("click", Function () {/* menu is displayed after the Click event is bound to the body, after which the binding is automatically deleted */
$ ("#menu"). Hide ();//body close menu after receiving the Click event
});
E.stoppropagation ();//Stop bubbling, the button will not tell the body when clicked, because the Click event bubbles to the body closes the menu.
})
$ ("#menu"). Bind ("click", Function (e) {/*) to bind the menu to a point-click event */
E.stoppropagation ();//Stop bubbling, menu will not tell body when clicked, otherwise the menu should be closed
})About iOS Browser: Document,body's Click event Trigger rule
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
