distinguish 'consequental' clicks (links etc.) vs. clicks/touches on blank space

[eoghanmurray]

At the moment, the rrweb MouseInteraction events record a Click with a x/y co-ordinate but without reference to the underlying event that was clicked upon.
This could be retrieved during playback by calling elementFromPoint after the event is executed, but for my usecase — labelling/describing the clicks on the timeline — this is too late. (I haven't tested whether elementFromPoint works or is accurate during playback — the pointer-events:none style on the rrweb container may hamper it).

Identifying the element would be great; it would also be great if we could identify whether the click/touch results in a page load (click on a link) or triggers some other javascript action (e.g. a modal popup)
There's also situations where e.g. a click on a link opens the link in a new background tab, so recording which meta keys are depressed would also be useful.
I'm not sure if these could be teased out, so I guess identifying the element and including it in the event would be a great first step.

I should be able to get around to implementing this but it's not high priority at the moment so just raising here in case there's prior work or other things to be concerned about.

Aside: some other commercial offerings label multiple clicks on blank space 'rage clicks', but personally I don't find this useful or accurate.

[Yuyz0112]

This could be retrieved during playback by calling elementFromPoint after the event is executed

type mouseInteractionParam = {
  type: MouseInteractions;
  id: number;
  x: number;
  y: number;
};

I think we are recording element id with mouse interactions?

[eoghanmurray]

Ah sorry I should have read the code (or the output) more closely before posting, apologies!

I also see that it's impossible to always check if there's been a click event listener set on an element:
https://stackoverflow.com/questions/11455515/how-to-check-whether-dynamically-attached-event-listener-exists-or-not
so I guess I'll have to drop the detection of 'consequential' clicks.

So other than that, would it be okay to record (in the click event) the 'href' attribute if it exists on the target? This would at least identify a traditional click on a link.

[meatflavourdev]

I also see that it's impossible to always check if there's been a click event listener set on an element:
https://stackoverflow.com/questions/11455515/how-to-check-whether-dynamically-attached-event-listener-exists-or-not
so I guess I'll have to drop the detection of 'consequential' clicks.

Can you explain this to a 5th grader with a software engineering degree? I am trying to understand your reasoning here.

[eoghanmurray]

@meatflavourdev

to always check if there's been a click event listener set on an element

This in relation to so called 'rage clicks' ... basically if someone clicks on a <div> element, there could be an event listener on that which will e.g. cause a purchase form to be posted. This is a very different click to one in blank space which registers on a <div> which doesn't have any consequence on it. I'd like to be able to distinguish between these two types of clicks.

[meatflavourdev]

@eoghanmurray

to always check if there's been a click event listener set on an element

This in relation to so called 'rage clicks' ... basically if someone clicks on a <div> element, there could be an event listener on that which will e.g. cause a purchase form to be posted. This is a very different click to one in blank space which registers on a <div> which doesn't have any consequence on it. I'd like to be able to distinguish between these two types of clicks.

Right, and the problem is that we can't detect dynamically set event listeners, thus cannot determine if a particular click might be consequential or not at "click time?" An event driven micro-services architecture might send these click logs for processing and, for example, use ML clustering to determine and label types of behavior... not sure that's in scope of this project(?)

But-- certainly valuable/useful information. I may be over-complicating; a simple js ML script could detect and label user behaviour as this kind of project produces an abundance of data... again, not sure it's in scope-- but sounds like fun.

[eoghanmurray]

(I deleted the first of your dupe comments ... I presume the first one was a draft of the second?!)

[eoghanmurray]

ML clustering to determine and label types of behavior... not sure that's in scope of this project

LOL that's definitely out of scope! The focus here is what can be determined with DOM/browser tech.

I've gone ahead and implemented the href recording in #659 — for review.

[meatflavourdev]

That comment will make more sense when rrweb does a 360 degree ML pivot, hehe. 😅