Intercept all mouse events

Question

I'm looking for a way to intercept all mouse events (especially clicks) on a web page.

My first instinct was $('body').click(....)

But that's not capturing the event if any other Handler is attached for a particular event.

To put the question in context: I'm writing a "statistics" module for my web app. We want to keep track of all user interactions on the pages to adapt. If we see they don't use a functionality we will add a tooltip for example.

I have following frameworks :

jQuery, Knockout and a little Framework "home made"

What I want is a function which is called on each click with mouse position.

Answer 1

Try something like this (without jQuery):

    var eventCount = 0;
    var eventProperty = [];

    var TrackMouse = function (mouseEvent) {
        eventProperty[eventCount++] = {
            id: mouseEvent.toElement.id,
            type: 'mouse',
            ts: Date.now(),
            x: mouseEvent.x,
            y: mouseEvent.y
        };

        console.log("Element id: " + eventProperty[eventCount - 1].id + ", X: " + mouseEvent.x + ", Y: " + mouseEvent.y + "\n");
    };

    document.addEventListener('click', TrackMouse);