Re: [csswg-drafts] [css-highlight-api] Approaches for dispatching highlight pointer events (#7513)

So something like we were mentioning was:

### Make `Highlight` inherit from `EventTarget`

So that we can dispatch events on them.

### Add a hit-testing API to the registry

Something like:

```webidl
partial interface HighlightRegistry {
  // For parallelism with elementsFromPoint.
  // Returned values in (z-order, priority) order.
  sequence<Highlight> highlightsFromPoint(long x, long y);
};
```

The idea is that the page could, either before or after handling DOM events, do something like:

```js
document.addEventListener("click", function(e) {
  if (e.defaultPrevented)
    return;
  for (let highlight of CSS.highlights.highlightsFromPoint(e.clientX, e.clientY)) {
    highlight.dispatchEvent(e);
    if (e.defaultPrevented)
      return;
  }
});
```

### Passive event listeners / `touch-action`

@dbaron / @flackr pointed out that encouraging document-level event listeners may be problematic (because having something like, e.g, a non-passive `pointerdown` event-listener might cause performance issues with scrolling).

@flackr proposed to support `touch-action: none` on highlights, so that you can make those event listeners passive as needed.

### Knowing specific ranges that are hit.

Per #7512, there are use cases to know the specific ranges that are hit. Which means that maybe the API should do something a bit more complex:

```webidl
dictionary HighlightHitTestResult {
  Highlight highlight;
  sequence<AbstrangeRange> ranges;
}
```

Or so. We could then encourage to do something like putting the highlights in the expando, something like:

```js
document.addEventListener("click", function(e) {
  if (e.defaultPrevented)
    return;
  for (let { highlight, ranges } of CSS.highlights.highlightsFromPoint(e.clientX, e.clientY)) {
    e.ranges = ranges;
    highlight.dispatchEvent(e);
    if (e.defaultPrevented)
      break;
  }
  delete e.ranges;
});
```

But that feels rather clunky... Not sure I have a better proposal atm tho.

-- 
GitHub Notification of comment by emilio
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7513#issuecomment-1201631397 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 1 August 2022 19:38:17 UTC