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?

CodePudding user response：

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

CodePudding user response：

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").