Frontory

Open code, practice, and notes →

Download source with English comments · for reading

SVG · 16 Pointer Event Regions

Series contents · Technology map

Stage: Accessibility and Data Maps · Editable example · Storage ID: svg-step-16

Goals and learning outcomes

Prerequisites

Prerequisite concepts: Linking names, Distinguishing decoration. Prepare the result files and observation records from Unit 15.

Key concepts and explanations

Paint and input

pointer-events determines which regions receive events. Thin visible strokes may also have narrow selection regions that are difficult to operate.

Bubbling

Child events propagate to the parent. For group-level selection, distinguish target from currentTarget.

Practice setup

First check the execution scope guidance on the example screen. The following describes preparation for extending the assignment in a separate project. Implement this yourself in an HTML and ES module project on a separate local HTTP development server. Record the browser version, viewport, and DPR.

The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.

Practice tasks

  1. Prepare day-16.js and index.html in an external practice project. Add a thick transparent hit path over a thin connector.
  2. Receive events on the parent g and log the ids of target and currentTarget.
  3. Save the output under the input condition 2px, then run again with 16px. Compare the hypothesis, "The operable region widens while the visible stroke stays the same," against the display and logs, and record the actual result and the causes of any differences in day-16-notes.md.

Variables to observe

VariableBaselineChangeExpected change / hypothesis
Selection width2px16pxThe operable region widens while the visible stroke stays the same

Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.

Completion criteria

Self-check

  1. Which pointer-events setting does a transparent stroke need?
  2. What becomes difficult if you overuse stopPropagation?

Official references

Linked example and execution scope

Example source · Runtime environments and limits

An editable browser experiment. Measurements vary with the current device and browser.

Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.

Next learning

Previous: Accessible Names and Descriptions · Next: Dragging and Capture

Open code, practice, and notes →