How to get the mouse position when click on a specific element?

Question

For example, I would like the content of a text field to be copied to the clipboard when I click on it. A note should then be displayed at the mouse position of this click. This all works well as far as I can assign a class to the relevant text field or any element.

$(document).ready(function(){
    $(".click-n-copy").click(function (e) {
        $(this).select();
        navigator.clipboard.writeText($(this).text());
        displaySuccessMessage(e.pageX,e.pageY,"copied");
    })  
});


function displaySuccessMessage(x,y,text)
{
        msg_width = 80;
        x = x - (msg_width/2);
        $('#successMessageTemp').remove();
        $("body").append("<div id='successMessageTemp' style='text-align:center;vertical-align:middle;width:"+msg_width+"px;position:absolute;top:"+y+"px;left:"+x+"px;border:0px solid grey;background:white;margin:2px;display:none'>" + text + "</div>");
        $("#successMessageTemp").html(text);      
        $("#successMessageTemp").show('slow');
        setTimeout('$("#successMessageTemp").hide("slow")',2000);
}

Now I would now like to do the same for words in markdown texts (standard markdown = no classes possible for links).

So, I can turn those words into links and call a function that does everything (copy, show message).

But what is the best way to do it? I need the mouse position at the time of the click usable in this function. Does this mean that I have to make eventlistener for all click events and mousemoves just to catch a few possible clicks?

Or is there a better way? Can I query the mouse position once as a snapshot instead of tracking it permanently?

Does it automatically copy when you click a link, a textarea, or something else? And what are you trying to copy/do in the markdown? — Lakshya Raj, Jul 10 '22 at 16:57
Yes it does. In the markdown I like to copy exactly the displayed text of a link not its url. Or alternatively an optional text e.g. via a data attribute, but I don't think that works in standard markdown either. — Scudo, Jul 11 '22 at 03:54

score 1 · Answer 1 · edited Jul 11 '22 at 02:28

1

Try to use this :

function printMousePos(event) {
  console.log("clientX: " + event.clientX + - clientY: " + event.clientY);
}

document.addEventListener("click", printMousePos);

MouseEvent.clientX Read only The X coordinate of the mouse pointer in local (DOM content) coordinates.

MouseEvent.clientY Read only The Y coordinate of the mouse pointer in local (DOM content) coordinates.

For more details

edited Jul 11 '22 at 02:28

David

5,882
3
33
44

answered Jul 10 '22 at 12:40

Shachar297

599
2
7

Thanks, that gives me the correct coordinates. But how can I tell if that was a click on a specific link in my Markdown text or a click somewhere else? And how do I know on which of multiple links in the same markdown textbox? I then have to copy the clicked text, for example. So my first idea was to make the link in markdown text as a function call and just pass the text to copy as a parameter. But how do I get the right mouse coordinates for that specific click event at the same time? – Scudo Jul 10 '22 at 16:18

score 0 · Answer 2 · answered Jul 11 '22 at 14:30

If you want to copy the text of a markdown link when it is clicked, you first will need the root markdown element (let's assume it has the ID markdown). With jQuery the job becomes easier since we can select every link in the markdown with #markdown a like below:

$(document).ready(function(){
    $("#markdown a").click(function (e) {
        var text2copy = $(this).text();
        navigator.clipboard.writeText(text2copy);
        displaySuccessMessage(e.pageX,e.pageY,"copied");
    });
});

Please note: if your markdown is regenerated then you will need to do this again, as the elements have been deleted and recreated (but without the click event handler).

In your comment you also mentioned a custom data-* attribute. If we assume that your markdown is safe to edit, we can use the same link loop as above and add a custom data attribute.

$(document).ready(function(){
    $("#markdown a").click(function (e) {
        var currentText = $(this).text();
        var newText = currentText.toUpperCase();
        $(this).attr("data-text2copy",newText);
    });
});

The same markdown regeneration warning applies here. Also, if we do this, the first code block needs to be updated. Replace the $(this).text() with $(this).attr("data-text2copy").

How to get the mouse position when click on a specific element?

2 Answers2