2

I want to measure the time between mousedown event and applying CSS active property without using any jQuery functions (pure Javascript). I found that there is onactive event but it is not supported by Opera (the browser on which I want to make this measurement). Actually this onactive event is supported only by IE (not sure which versions).

htmlElement.addEventListener('mousedown', function(){var timestamp = new Date().getTime() / 1000; console.warn('mouse down ', timestamp)})

htmlElement.addEventListener('DOMAttrModified', function(){var timestamp = new Date().getTime() / 1000; console.info('highlighted ', timestamp)})

This 'DOMAttrModified' event doesn't report when a button becomes active.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Nikolay
  • 185
  • 1
  • 5
  • 14

1 Answers1

5

:active is a CSS pseudo-class, not a DOM attribute or property. It isn't possible or feasible to measure the time between mouse down and the time the :active pseudo-class is set because of the single-threaded nature of GUI and code execution. Basically, by the time the mouse event fires, CSS and GUI updates are already queued and no event fires for when :active is applied.

Still, I can't think of any valid reason for worrying about how long this process takes, you're probably better off forgetting about it and moving on.

Andy E
  • 338,112
  • 86
  • 474
  • 445
  • Yes you are right. I didn't ask my questions correctly I want the time between mouse down and the end of rendering the changes that this ':active' pseudo class sets. For example I notices that if I use gradients rendering is much slower and this makes my GUI not very responsive. – Nikolay Aug 06 '12 at 13:21
  • @Nikolay: in that case, you may want to investigate the 0ms timeout using `window.postMessage` [as described here](http://dbaron.org/log/20100309-faster-timeouts). – Andy E Aug 06 '12 at 13:33