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.
Related
Is there any event for the textarea that will fire as your dragging your mouse making a selection across the text? For example, the event would fire when you first click inside of the textarea and would continue to fire as you drag your mouse making a selection. The event would stop firing after you have let go of the mouse click button, leaving some of the text selected.
you can catch mousemove and check for buttons properties, if buttons equals 1 then left mouse is clicked.
function fire(selectedtext){
console.log(selectedtext);
}
$( ".textarea" ).mousemove(function( event ) {
if(event.buttons==1)
{
var seltext = $(".textarea").val().substring(this.selectionStart,this.selectionEnd);
if(seltext.length > 0) fire(seltext );
}
});
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);
http://jsfiddle.net/63Y54/2/
In the example above when the user clicks and drags left or right off the canvas while holding the mouse button down and then takes their finger off the mouse the oscillator note hangs. I want to fix this. I am curious if their is a simple way to do something like..
if (mouseup == !htmlElement){
then....
}
In this case the html element would be the canvas element as that is what the user is clicking on.
As an attempt to fix this I made the body element encompass the page by setting its CSS width and height to 100%.
I then created a function that selected the body element with a mouseup click handler that launches the oscillator.stop() method. This only works when the user moved their mouse to the side of the page but when they moved down it still creates a hanging note.
This pseudo solution is here:
http://jsfiddle.net/63Y54/5/
I think this similar question answers yours.
jQuery detect mousedown inside an element and then mouseup outside the element
Here is the code from it from a guy named Mike:
var isDown = false;
$("#element").mousedown(function(){
isDown = true;
});
$(document).mouseup(function(){
if(isDown){
//do something
isDown = false;
}
There is additional code handling fringe cases in thelink as well.
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/
I've downloaded a JQuery plugin for a mousehold event.
http://remysharp.com/2006/12/15/jquery-mousehold-event/
I have this div that calls for mousemove event:
div.addEventListener('mousemove',function() {
//things
});
whenever I call the mousehold event like this:
var value = 0;
$(div).mousehold(function() {
value += 20;
$(div).html(value);
});
it would work. But if I start moving (thus, calling the mousemove event) while onmousehold, the value does not increase anymore, meaning, it stopped calling the mousehold event even if I got my left click still on hold.
How can I make it happen that when I do a mousemove, the mousehold event still works? tnx!
What you're asking (at least, what I think you're asking), is simple enough with some basic logic.
By binding the mousedown, mousemove, and mouseup and setting a flag for the "down" state of the mouse, this can easily be done: JSFiddle
You could use the event object like so:
div.addEventListener('mousemove', function(event) {
// `event.buttons` gets the state of the mouse buttons
// 0 = not pressed, 1 = left click pressed, 2 = right click pressed
if (event.buttons === 1) {
value += 20;
}
});