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.

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.

• javascript
• jquery
• html

Share Improve this question Follow edited May 6, 2016 at 23:12 Jurion asked Nov 16, 2013 at 3:41 JurionJurion 1,2981111 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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);