draco1023
7/22/2016 - 8:06 AM

Selection change event notes

Selection change event notes

test.js
content_copyfile_download
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]);
  });
});
test.html
content_copyfile_download
<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>
notes.md
content_copyfile_download
  • Rendered
  • Source

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.