I tested this page in Chrome (mouse, touch, pen, touch Android) and Firefox (mouse, touch, touch Android).
From the test results, it looks like the touch/pen click target is calculated by re‑running hit‑testing instead of following the 4.2.12.3 Event dispatch algorithm.
Test results
- mutation target:
<button>
pointerdown target: <button>
Structure 1 - pointer-capture: release
Mutation on pointerup
pointerup target: <button>
| mutation |
click (mouse) |
click (touch / pen) |
click (expected) |
| remove node |
none |
<body> |
none |
display: none |
<button> |
<body> |
<button> |
pointer-events: none |
<button> |
<body> |
<button> |
Mutation on pointerdown
| mutation |
pointerup |
click (mouse) |
click (touch / pen) |
click (expected) |
| remove node |
<body> |
none, <body> Firefox |
<body> |
?<body> |
display: none |
<body> |
<body> |
<body> |
<body> |
pointer-events: none |
<body> |
<body> |
<body> |
<body> |
Structure 1 - pointer-capture: capture
Mutation on pointerup
pointerup target: <button>
| mutation |
click (mouse) |
click (touch / pen) |
click (expected) |
| remove node |
none |
<body> |
none |
display: none |
<button> |
<body> |
<button> |
pointer-events: none |
<button> |
<body> |
<button> |
Mutation on pointerdown
| mutation |
pointerup |
click (mouse) |
click (touch / pen) |
click (expected) |
| remove node |
<body> |
none, <body> Firefox |
<body> |
?<body> |
display: none |
<button> |
<button> |
<body> |
<button> |
pointer-events: none |
<button> |
<button> |
<body> |
<button> |
Structure 2 (Overlapping elements) - pointer-capture: release
body
└─ div
├─ span (below)
└─ button (on top)
Mutation on pointerup
pointerup target: <button>
| mutation |
click (mouse) |
click (touch / pen) |
click (expected) |
| remove node |
none |
<span> |
none |
display: none |
<button> |
<span> |
<button> |
pointer-events: none |
<button> |
<span> |
<button> |
Mutation on pointerdown
| mutation |
pointerup |
click (mouse) |
click (touch / pen) |
click (expected) |
| remove node |
<span> |
none, <div> Firefox |
<span> |
?<div> |
display: none |
<span> |
<div> |
<span> |
<div> |
pointer-events: none |
<span> |
<div> |
<span> |
<div> |
Structure 2 (Overlapping elements) - pointer-capture: capture
body
└─ div
├─ span (below)
└─ button (on top)
Mutation on pointerup
pointerup target: <button>
| mutation |
click (mouse) |
click (touch / pen) |
click (expected) |
| remove node |
none |
<span> |
none |
display: none |
<button> |
<span> |
<button> |
pointer-events: none |
<button> |
<span> |
<button> |
Mutation on pointerdown
| mutation |
pointerup |
click (mouse) |
click (touch / pen) |
click (expected) |
| remove node |
<span> |
none, <div> Firefox |
<span> |
?<div> |
display: none |
<button> |
<button> |
<span> |
<button> |
pointer-events: none |
<button> |
<button> |
<span> |
<button> |
I tested this page in Chrome (mouse, touch, pen, touch Android) and Firefox (mouse, touch, touch Android).
From the test results, it looks like the touch/pen
clicktarget is calculated by re‑running hit‑testing instead of following the 4.2.12.3 Event dispatch algorithm.Test results
<button>pointerdowntarget:<button>Structure 1 - pointer-capture: release
Mutation on pointerup
pointeruptarget:<button><body>display: none<button><body><button>pointer-events: none<button><body><button>Mutation on pointerdown
<body><body>Firefox<body><body>display: none<body><body><body><body>pointer-events: none<body><body><body><body>Structure 1 - pointer-capture: capture
Mutation on pointerup
pointeruptarget:<button><body>display: none<button><body><button>pointer-events: none<button><body><button>Mutation on pointerdown
<body><body>Firefox<body><body>display: none<button><button><body><button>pointer-events: none<button><button><body><button>Structure 2 (Overlapping elements) - pointer-capture: release
Mutation on pointerup
pointeruptarget:<button><span>display: none<button><span><button>pointer-events: none<button><span><button>Mutation on pointerdown
<span><div>Firefox<span><div>display: none<span><div><span><div>pointer-events: none<span><div><span><div>Structure 2 (Overlapping elements) - pointer-capture: capture
Mutation on pointerup
pointeruptarget:<button><span>display: none<button><span><button>pointer-events: none<button><span><button>Mutation on pointerdown
<span><div>Firefox<span><div>display: none<button><button><span><button>pointer-events: none<button><button><span><button>