Skip to content

Instantly share code, notes, and snippets.

@robertknight
Last active March 29, 2021 12:31
Show Gist options
  • Save robertknight/ad9f1bca8280b3fa325817aa3ed9935c to your computer and use it in GitHub Desktop.
Save robertknight/ad9f1bca8280b3fa325817aa3ed9935c to your computer and use it in GitHub Desktop.
Selection change event notes

Notes on selection events in mobile browsers (April 2016)

Notes on events that are fired during text selection in current desktop and mobile browsers.

Testing steps:

  1. Serve test.html from local dev server and open on device
  2. Make an initial selection via long-press on the text, observing reported events
  3. Modify the selection using drag handles and observe reported events

iOS 9.3

During initial selection by long-pressing a word, Safari logs:

touchstart
selectionchange
touchend

During subsequent edits by dragging the start/end markers on the text, the selectionchange event is fired each time the selection markers are adjusted. None of the other watched events are fired.

The selectstart event is never fired.

Android Chrome (Stable)

During initial selection by long-pressing a word, these events were fired:

touchstart
selectstart
selectionchange

Adjusting the selection using the drag handles resulted in selectionchange events but no further touch events.

Android Firefox (v46, Stable)

During initial selection by long-pressing a word, these events were fired:

touchstart

Adjusting the selection using the drag handles resulted in no further touch, mouse or selection events.

Android Firefox (Nightly)

During initial selection by long-pressing a word, these events were fired:

touchstart
selectstart
selectionchange
touchend

Adjusting the selection using the drag handles triggered selectionchange events but no further touch events.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<script src="test.js"></script>
</body>
</html>
var events = [
'touchstart',
'touchend',
'mousedown',
'mouseup',
'selectionchange',
'selectionchanged',
'selectstart',
];
var counts = events.reduce(function (counts, name) {
counts[name] = 0;
return counts;
}, {});
events.forEach(function (name) {
document.addEventListener(name, function () {
++counts[name];
console.log('%s triggered. count: %d', name, counts[name]);
});
});
@drinkmaker
Copy link

Hello,
Has anything changed in 2019?
Thanks.

@robertknight
Copy link
Author

Some code I wrote in 2016 that makes use of selection events, based on the above notes, is still actively used and works on all modern browsers. Beyond that I don't know if anything changed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment