We Keep Coding

Get coordinates out of click to work with

So, I've been trying to render some div instead of the context menu once the use user right-click anywhere on the page, and for this, I need to receive the coordinates of the click. Currently, I'm doing it like this
function printMousePos(event) {
let coordinates = [event.clientX, event.clientY];
//console.log(coordinates);
return coordinates;
}
document.addEventListener("click", printMousePos);
In the console, I got an array with x and y, but I can't work with them outside the function. I've been trying something like
let a = function (event){...}
but it doesn't seem to return the array in any case, so how could I refer to x and y? The problem is that those are dynamic and change only when the event occurs. Should I just render the menu inside of the printMousePos(event)
? Or is there any other way to get x and y?
EDIT
Thanks a lot for your answers, works for me now. I did the following - rendered the menu outside everything, hide it using CSS, and on click it changes class to visible and appears in the coordinates of the click. Goes something like
rendering the menu in window =>
rootNode.addEventListener('contextmenu', event => {
event.preventDefault();
//console.log('123');
menu.classList.add('active');
menu.style.top = `${event.clientY}px`;
menu.style.left = `${event.clientX}px`;
});
and it shows on click. So, no need to get the coordinates outside.

As Teemu said "You can't return anything from an event listener". And you don't need to.
You can either declare the coordinates array outside the event listener and fill it with data once the event fired OR (and I'd prefer that) write the function that is supposed to work with the coordinates and then call it inside the event listener (which is pretty much what you suggested yourself):
function handleClick(x,y) {
// do stuff with x and y here, like drawing a div...
}
document.addEventListener("click", function(event) {
handleClick(event.clientX, event.clientY);
});

Customize dynamically created elements adding an option choosed via popup

I have a little code that creates elements (rectangles) and when I pass the mouse over them, a "customize yellow button appears on it". When I click this button, a popup with colors let us choose a colour to add in the selected rectangle.
Basically, I have 3 elements... click on 1 of them and choose a colour. This action, clones de tag and set it into the selected item. This works fine.
The problem appears when I click in the second item (or third)... I choose a new different colour but the action changes the selected rectangle and the sibling -applies to all elements that already have a cloned - (like propagation)...
I need to customize every single rectangle with its own colour and not all of them with the same. I pasted a little code here and a working (wrong) link in jsfiddle.
The action executes "on" cause the items are created dynamically (in this example I set them manually.
Can anybody help me? I don't understand what I'm doing wrong.
https://jsfiddle.net/martiniglesias/20Laxn84/2/
$(document).on("click","a.person",function (e)
{
e.preventDefault();
e.stopPropagation();
var elrel=$(this).attr('rel');
var elem=$("#ch_dndBoard1 span[data-id="+elrel+"]");
var elemrel=elem.attr("rel");
if (elemrel=="f1E")
{
$("body").append ("<div class='overlay'></div>").show();
$(".persE").fadeIn("fast");
$(".persE li").click(function(f)
{
f.preventDefault();
f.stopPropagation();
var ese=$(this).closest("li");
if ($(this).hasClass("nope"))
{
elem.find('b').fadeOut("slow",function() { elem.find('b').remove(); });
}
else
{
elem.find('b').remove();
var added=ese.find("b").clone();
added.css({"left":0+"px","top":+5.48+"px","position":"absolute"});
$(added).insertAfter(elem.find('em'));
}
$('.persE').fadeOut("fast",function(){ $(".overlay").remove(); });
});
}
return false;
});
I expect that every single rectangle can choose its own colour cloning it from the popup. For example, I want, rect1 blue, rect2 without color, rect3 red...
Thank you!
PS: Please, forgive my poor english :(

You have this issue because you are adding a click event listener to .persE li each time you click on a a.person.
You need to remove that listener when all your logic is over:
$(".persE li").click(function(f) {
// Your code
$(".persE li").off('click');
});
Be aware that if you listen an other click event with a different logic, that one will be destroyed too.
In order to avoid this, you need to reference your different logics in function:
const changeColorEvent = (e) => {
// Your code
$(this).off('click', changeColorEvent); // Here, "otherEvent" will still exist.
};
const otherEvent = (e) => {
// Different logic here
}
$(".persE li").click(changeColorEvent);
$(".persE li").click(otherEvent);

Paper.js Mouseup Event Inhibited by Tool

I'm using Paper.js and I need to do something on mouseup on a raster. However the event does not seem to fire when I use the global tool space.
Note this sketch, where clicking and dragging yields a log something like this:
raster mousedown
raster mousedrag
... [more "raster mousedrag"] ...
raster mousedrag
raster mouseup
indicating the raster.on('mouseup' function() {...}); was hit properly, as expected.
However, in this sketch, which contains functionality for displaying the dragged area, the raster.on('mouseup' function() {...}); is not hit properly. Note that the log does not contain "raster mouseup", only "raster mousedown" and "raster mousedrag".
Why in the second instance does mouseup not fire on the raster? How can I adjust the code in the second sketch so that it does fire?

Well, the simple answer is that the problem is that the on('mouseup', ...) handler is never called. The paper code gets the most recent hit, i.e., the red rectangle you're drawing, and checks to see if that responds to the 'mouseup' event. It doesn't. Then it checks the parent chain and the parent of the red rectangle is the layer, so it doesn't pass the .responds test either. Because the raster is at the same level as the red rectangle handlers associated with the raster are never called.
The simplest answer is to install the handlers on the view, not the raster, by using the global tool, e.g.,
function onMouseUp(event) {
console.log('vup');
}
See the paperjs code (in CanvasView.js):
function callEvent(view, type, event, point, target, lastPoint) {
var item = target,
mouseEvent;
function call(obj) {
if (obj.responds(type)) {
if (!mouseEvent) {
mouseEvent = new MouseEvent(type, event, point, target,
lastPoint ? point.subtract(lastPoint) : null);
}
if (obj.emit(type, mouseEvent) && mouseEvent.isStopped) {
event.preventDefault();
return true;
}
}
}
while (item) {
if (call(item))
return true;
item = item.getParent();
}
if (call(view))
return true;
return false;
}

How defined in jQuery was it a regular click on the same element or double-click?

How can I define in jQuery was it a regular click on the same element or double-click?
For example we have element like this:
<div id="here">Click me once or twice</div>
And we need to perform different actions after regular click and double-click.
I tried something like this:
$("#here").dblclick(function(){
alert('Double click');
});
$("#here").click(function(){
alert('Click');
});
But, of course, it doesn't work, everytime works only 'click'.
Then, some people showed me this:
var clickCounter = new Array();
$('#here').click(function () {
clickCounter.push('true');
setTimeout('clickCounter.pop()', 50);
if (clickCounter.length > 2) {
//double click
clickCounter = new Array(); //drop array
} else {
//click
clickCounter = new Array(); //drop array !bug ovethere
}
});
Here we tried to set the interval between clicks, and then keep track of two consecutive events, but this have one problem.. it doesn't work too.
So, someone knows how to do this? or can someone share a link to the material, where I can read about it?

From QuirksMode:
Dblclick
The dblclick event is rarely used. Even when you use it, you should be
sure never to register both an onclick and an ondblclick event handler
on the same HTML element. Finding out what the user has actually done
is nearly impossible if you register both.
After all, when the user double–clicks on an element one click event
takes place before the dblclick. Besides, in Netscape the second click
event is also separately handled before the dblclick. Finally, alerts
are dangerous here, too.
So keep your clicks and dblclicks well separated to avoid
complications.
(emphasis mine)

What you are doing in your question, is exactly how it should be done.
$(".test").click(function() {
$("body").append("you clicked me<br />");
});
$(".test").dblclick(function() {
$("body").append("you doubleclicked me<br />");
});
It works and here is an demo for that.
Since, you want to detect separate single double click. There is a git project for this.
$("button").single_double_click(function () {
alert("Try double-clicking me!")
}, function () {
alert("Double click detected, I'm hiding")
$(this).hide()
})
It adds up events to detect single double clicks.
Hope it helps you now.

Detect move of mouse while clicked and detect doubleclick

for the moment I have implemented different actions for when a person clicks on a canvas and when a person clicks and drags something. I did this by binding the mousedown event to my canvas and in that function there is made the difference between a drag or a mouseup. This works very good, but I have a problem when I also want to support doubleclicking on elements.
The normal way to implement this is like this:
$(canvas).click(function1);
$(canvas).dblclick(function2);
but I didn't implemented that way because I had to check whether or not the mouse moved (i.e. dragged). This is my current implementation:
var handler = {
clicked:function(e){
...
$(canvas).bind('mousemove', handler.dragged);
$(window).bind('mouseup', handler.dropped);
},
dragged:function(e){
...
},
dropped:function(e){
function loop(ctr){
if (ctr < 50) {
setTimeout(function(){loop(ctr+1)}, 2);
} else {
$(canvas).mousedown(handler.clicked);
handler.singleClick(e);
}
}
$(canvas).mousedown(handler.doubleclicked);
loop(0);
},
doubleClick: function(e){
...
},
singleClick: function(e){
...
}
}
$(canvas).mousedown(handler.clicked);
I tried to combine those two things (recognition of dragging and doubleclick) by implementing the dropped-function which waits for a period of time to listen for another click and if it didn't occur within that period it goes to the singleclick function. For the moment this not yet recognizes the second click.
I assume that there exist better ways to do this?

You might want to look at this:
http://threedubmedia.com/code/event/drag
It provides you with additional functionality .drag() in addition to .click() and .dblclick().
Theres also a drop version:
http://threedubmedia.com/code/event/drop