We Keep Coding

JavaScript/WebGL take periodically mouse coordinates from one click event until the second one

I have a program that simulates a cloth (made by spring and vertices) in WebGL. What the program must do is to permit the user to click on a point in the cloth, dragging it following the mouse and if the user clicks again, release it. I need to check which click event is the one that starts the dragging and which one terminates it, then I used a global variable "clicked", set it to false at the beginning and swapped everytime the event click is triggered. Now for the dragging I need periodically to take the coordinates of the mouse, then I though using a "mousemove" event was the best solution: if the "clicked" is set to true, this means that we are in the "dragging phase", then the mousemove event must be called and continue to work until the next click event. The problem is that I don't know how to use the mousemove in connection to the click event: if I put the mousemove event outside the click event, we never enter in that, and if I put the mousemove event inside the click event, also if the "clicked" variable change from true to false, the mousemove event is always called. The skeleton of the code is the following one:
var clicked = false;
function exec() {
let web_gl = document.getElementById("webgl-canvas").getContext('webgl2');
web_gl.canvas.addEventListener('click', (e) => {
clicked = !clicked;
console.log(clicked);
if (clicked == true) {
web_gl.canvas.addEventListener('mousemove', (e) => {
//do something for dragging
});
};
});
}
function main() {
exec();
};
Here also if the console prints both false and true in the correct way, we enter always in the if condition, it seems the condition sees "clicked" always true.
The other option was this one:
var clicked = false;
function exec() {
let web_gl = document.getElementById("webgl-canvas").getContext('webgl2');
web_gl.canvas.addEventListener('click', (e) => {
clicked = !clicked;
console.log(clicked);
});
if (clicked == true) {
web_gl.canvas.addEventListener('click', (e) => {
\\do something for dragging
});
}
}
function main() {
exec();
};
In this case we never enter in the event, and I don't understand why.
Does someone have an hint about this problem, or a better idea to handle what I need to implement?

Adressing your second snippet: your code is executed asynchronously, the event handlers are not executed until the event is emitted, hence clicked will still be in its initial state (false) when the condition to add the mousemove handler is evaluated, thus is will not be added and hence never be executed.
What you want to do is to add both event handlers and check within the mousemove event handler if clicked is true.
Btw. the logic you're about to implement means that a user has to click(mouse down and up) to activate the dragging and click again to disengage, rather than what's common UI practice: click(mousedown) and hold to drag things.

I found the solution. I used the click event in the main() function that is called only once, set a flag such that it is negated when a click is detected (passing from false to true and vice-versa). Inside the click event, if the flag is true, this is the first click, I add the mousemove event, picking the coordinates.

Checking if mouse buttons are down without listening to an event?

I'm building a dragging widget thingy, it listens to 'mouseup'/'mousedown' events from the interactive element.
Works fine most of the time but I've found the 'mouseup' to be a bit unreliable. Is there an event independent way of checking whether the mouse buttons are up/down? I could attach it to a timer or the mousemove event to make it foolproof.

You have to use an event however you can have script from within the events to assign the state of the mouse down that you can test later.
var isMouseDown = false;
document.addEventListener("mousedown", function()
{
isMouseDown = true;
});
document.addEventListener("mouseup", function()
{
isMouseDown = false;
});
if (isMouseDown == true) { ... }

Is there an event independent way of checking whether the mouse buttons are up/down?
No, there isn't. But for your dragging code, your best bet for listening for mouseup isn't the element you're dragging, but the document as a whole. You still won't get the event if the mouse release is outside the window, but you will if the mouse has been moved abruptly and released such that it's outside your element when the release occurs.
You can also listen for mousemove, which of course fires a lot, and also tells you whether buttons are down (via the buttons property on the event object).

Javascript - left mouse button function executes only once LMB is released

I am trying to make an HTML5 game that as long as the player is pressing the LMB, the bullets keep spawning, and once LMB is released, the shooting stops. This is my function:
document.onclick = function(mouse){
console.log("Shoot");
}
Only once the LMB is released, that message is showing up in the console log.
I did look over stackoverflow and found this:
Qt mouseMoveEvent only when left mouse button is pressed
But I failed to integrate it into my canvas... it just won't do anything.
Thank you for your time.

If you need to execute code when the mouse is pressed you should be using mousedown instead of onclick.
Check the Mouse Events examples on w3c. http://www.w3schools.com/js/js_events_examples.asp

"onclick" calls the function on mouse click up. You need a more specific event listener.
What your looking for, assuming your use case is accurate, is "onmousedown".
See this link for more info: http://www.w3schools.com/jsref/event_onmousedown.asp
Simply replace "onclick" with "onmousedown".
Hope that helps!!

The onclick method is invoked when you release the mouse button instead of being held down. What you need is the mousedown method.
Also, you need to reword your question a bit. As I understand,
you want something to happen while the mouse key is being held
down.
To do that, you need to invoke the mousedown activity in some reasonable interval.
var mousedownID = -1; //Global ID of mouse down interval
function mousedown(event) {
if(mousedownID==-1) //Prevent multimple loops!
mousedownID = setInterval(whilemousedown, 100 /*execute every 100ms*/);
}
function mouseup(event) {
if(mousedownID!=-1) { //Only stop if exists
clearInterval(mousedownID);
mousedownID=-1;
}
}
function whilemousedown() {
/*put your code here*/
/* i.e, whatever you what to keep on happening while the button is down*/
}
//Assign events
document.addEventListener("mousedown", mousedown);
document.addEventListener("mouseup", mouseup);
//Also clear the interval when user leaves the window with mouse
document.addEventListener("mouseout", mouseup);

How do I loop the action on mousedown in easeljs

I am creating a basic text window in easeljs. The text window has up and down scroll arrows to enable the scrolling of the text. I do this simply by listening for a click on the up or down button and then moving the y coordinates of the text box on the click.
The problem I have is that it only moves once per click. If I have a lot of text to scroll, I have to click a lot of times. What I want is to be able to click and hold the button and have the listener repeat the action whilst the mouse is down?
Here's my simplified code attached to the down button:
btn_down.on("mousedown", function(evt) {
content.y -= 20;
game.stage.update();
});
I have tried mousedown and click, but it still only seems to fire once.

The mousedown event fires once (when you press your mouse button). If you want to loop an event while the mouse is down, either set an interval when the mouse is pressed (and clear it when it is released), or toggle a property that causes an update during a tick.
http://jsfiddle.net/lannymcnie/t7uz2v6m/
shape.on("mousedown", handlePress);
shape.on("pressup", handleRelease);
var pressed = false;
function handlePress(event) { pressed = true; }
function handleRelease(event) { pressed = false; }
function tick(event) {
if (pressed) { shape2.x += 1; }
stage.update(event);
}
Note that I use the "pressup" event instead of the mouseup equivalent (click), because if you roll out and release, the "pressup" event still fires.
Cheers.

jquery mouseclick event

I am quite new to jquery and looking for event that handles mouse down event. Over now I have found and use something like:
$("#canva").live('mousedown mousemove mouseup', function(e){ ....
but it fires function(e) even when mouse is over canvas element (both when the left button is clicked or not).
I am looking forward to event that will be fired in every change of coordinates above #canva element and when my mouses button is clicked. Releasing left mouse button should cause end of this event.

One way to do this would be to create a global variable and to modify its value when the user clicks over the element as such:
var mouseIsDown = false;
$('#mycanvas').on('mousedown', function () {mouseIsDown = true});
$('#mycanvas').on('mouseup', function () {mouseIsDown = false});
Now all you have to do is to bind 'mousemove' to the function you want to fire and simply appending a conditional to the body of the function that checks the state of the left click and escapes if necessary.
function fireThis(e) {
// if the user doesn't have the mouse down, then do nothing
if (mouseIsDown === false)
return;
// if the user does have the mouse down, do the following
// enter code here
// ....
// ....
}
// bind mousemove to function
$('#mycanvas').on('mousemove', fireThis);
Now, if the user were to click inside the element and then drag the mouse outside the element before releasing, you'll notice that 'mouseup' will never get triggered and the variable mouseIsDown will never be changed back to false. In order to get around that, you can either bind 'mouseout' to a function that resets mouseIsDown or bind 'mouseup' globally as such:
$('#mycanvas').on('mouseout', function () {mouseIsDown = false});
OR
$(document).on('mouseup', function () {mouseIsDown = false});
Here's an example: http://jsfiddle.net/pikappa/HVTWb/