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?
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.