About iOS Browser: Document,body's Click event Trigger rule

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.