Sample DOM Tree

Composed DOM Tree

Examples

Case1 (target: D, relatedTarget: F)

currentTarget

target (after retargetting)

relatedTarget (after retargeting)

D

D

F

C

D

F

[H]

H

I

[K]

K

M

[N]

N

M (There is no related target in the same subtree. So use relatedTarget in nearest ancestor scope)

SR-J

N

M

J

K

M

SR-G

K

M

G

H

I

SR-B

H

I

B

D (currentTarget and target are in the same subtree)

F

A

D (currentTarget and target are in the same subtree)

F

Case2 (target: D, relatedTarget: L)

currentTarget

target (after retargetting)

relatedTarget (after retargeting)

D

D

B

C

D

B

[H]

H

G

[K]

K

L

[N]

N

L

SR-J

N

L

J

K

L

SR-G

K

L

G

H

G

SR-B

H

G

B

D (currentTarget and target are in the same subtree)

F

A

D (currentTarget and target are in the same subtree)

F

Case 3: target: J, relatedTarget: L

currentTarget

target (after retargetting)

relatedTarget (after retargeting)

J

J

L

SR-G

J

L

… Event should be stopped here.

G (Should not be dispatched)

G

G

Case 4: target: D, relatedTarget: A

currentTarget

target (after retargetting)

relatedTarget (after retargeting)

D

D

A

C

D

A

[H]

H

A

[K]

K

A

[N]

N

A

SR-J

N

A

J

K

A

SR-G

K

A

G

H

A

SR-B

H

A

B

D (currentTarget and target are in the same subtree)

A

A

D (currentTarget and target are in the same subtree)

A

Case 5: target: A, relatedTarget: D

currentTarget

target (after retargetting)

relatedTarget (after retargeting)

A

A

D