[Original] Realization of multi-layer div overlay JS Event traversal

Last Update:2017-10-28 Source: Internet

Author: User

Tags event listener

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

A good feature in Flash is that there is no actual object part in a container, and it does not block the mouse events from penetrating to the next layer.

The front end is different, two DIV cascade, the Upper Div will receive all events (even if the contents of the div is empty, there is no actual object), the lower div what events are not received.

As an example:

In this

C Block in a container (a container border is red)

D block in B container (b container border is green)

Part A B overlaps, b is on the upper level.

Without doing anything, C blocks can never be ordered, because B has it covered.

Next, I'll give you a way to get the CD to work without changing the structure of the page.

The main advantage is the pointer-events property in CSS.

Grammar:

default value : Auto

applies to : all elements

inheritance : There are

Animation : No

Calculated value : Specify a value

Value:

Auto: Behaves the same as when the Pointer-events property is not specified. Same as value on SVG content visiblepainted
None: The element will never be the target of a mouse event. However, when the Pointer-events property of its descendant element specifies a different value, the mouse event can point to the descendant element, in which case the mouse event will trigger the parent element's event listener in the capture or bubbling order.
Other values can only be applied to SVG.

Reference Link: http://www.css88.com/book/css/properties/user-interface/pointer-events.htm

Note that this property part of the legacy browser may not be supported.

I notice that, after setting to none, its child elements can still respond to mouse events by explicitly setting auto, so we can set the A-B container to none, do not respond to mouse events, and set the CD explicitly to auto so that they respond to mouse events so that B does not block a. Here is the specific code

<!DOCTYPE HTML><HTML><Head>    <title>Test position</title>    <styletype= "Text/css">. A{position:Absolute;Border:Solid 1px Red;width:400px;Height:400px; Left:0px;pointer-events:None;        }. b{position:Absolute;Border:Solid 1px Green;width:400px;Height:400px; Left:200px;pointer-events:None;        }. A1{position:Absolute;width:100px;Height:100px;background:Red; Left:250px;Top:50px;pointer-events:Auto;        }. B1{position:Absolute;width:100px;Height:100px;background:Green; Left:50px;Top:250px;pointer-events:Auto;        }    </style></Head><Body>    <Divclass= "a"onclick= "Onclicka ()">        <Divclass= "A1"></Div>    </Div>    <Divclass= "B"onclick= "onclickb ()">        <Divclass= "B1"></Div>    </Div>    <Scripttype= "Text/javascript">        functionOnclicka () {Console.log ('Click a'); }        functiononclickb () {Console.log ('Click b'); }            </Script></Body></HTML>

The results are as follows:

Fix it.

[Original] Realization of multi-layer div overlay JS Event traversal

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More