let target = document.querySelector('#target');

let log = document.querySelector('#log');

let container = document.querySelector('#container');

let logging = false;

let last = "";

function logev(elem, evt) {

  if (elem == target) {

    logging = true;

  }

  if (!logging)

    return;

  // We have an explicit listeners on target so

  // don't double-log those events through bubbling.

  if (evt.target == target && elem != evt.target)

    return;

  if (!document.querySelector('#logtouch').checked && evt.type.startsWith('touch'))

    return;

  if (!document.querySelector('#logpointer').checked && evt.type.startsWith('pointer'))

    return;

  let desc = evt.target.id || evt.target.tagName;

  let cur = `${evt.type} on ${desc}`;

  if (cur == last) {

    // add a period for repeated events.

    log.textContent += ' .';

    return;

  }

  log.textContent += `\n${cur}`;

  last = cur;

}

​

function prevent(evt) {

  evt.preventDefault();

}

​

let types = ['pointerdown', 'pointermove', 'pointerup',

            'touchstart', 'touchmove', 'touchend'];

​

target.addEventListener('pointerdown', (evt) => {

  if (document.querySelector('#capture').checked) {

    target.setPointerCapture(evt.pointerId);

  }

  evt.preventDefault();

  target.remove();

});

​

for (let elem of [document.body, target]) {

  for (let type of types) {

    elem.addEventListener(type, logev.bind(null, elem));

  }

}