I am trying to create a javascript game, where the user controls the player with keyboard and mouse, the problem is when the keyboard is being used, the mouse event listeners do not work.
document.addEventListener('keydown', _this.addMovements);
document.addEventListener('keyup', _this.removeMovements);
document.addEventListener('mousemove', _this.updateFaceSideEvent);
document.addEventListener('click', _this.fireBulletEvent);
while the keydown event is working, that time the click event or the mousemove event is not working.
Related
I have JavaScript code where:
When the user presses the left mouse button, a mousedown event is fired, which triggers a call to function OnMouseDown.
When the user releases the left mouse button, a mouseup event is fired, which triggers a call to function OnMouseUp.
The two events are fired asynchronously.
For example, the mouseup event can be fired immediately after the mousedown event is fired (short mouse click), before the OnMouseDown ends. (Figure1)
I want to process the events sequentially, where the function OnMouseUp will only start after OnMouseDown ends.
I can achieve this by preventing the mouseup event from firing until after OnMouseDown ends (by calling removeEventListener('mouseup', OnMouseUp) when OnMouseDown begins) (Figure2)
But then I may lose a mouseup event altogether (Figure3)
Figure3 - mouseup event is lost
I am looking for a way to insure that
a mouseup event after a mousedown event is not lost, and
the OnMouseUp function begins after OnMouseDown ends.
How can I achieve this?
The following code example demonstrates the problem:
function sleep1 () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("Finished sleeping");
}, 2000);
});
}
// The mousedown event is fired when a pointing device button (usually a mouse button) is pressed on an element.
document.addEventListener('mousedown', async function(e) {
console.log('BEG OnMouseDown');
let retval = await sleep1();
console.log('retval: ', retval);
console.log('END OnMouseDown');
});
// The mouseup event is fired when a pointing device button (usually a mouse button) is released over an element.
document.addEventListener('mouseup', function(e) {
console.log('BEG OnMouseUp');
console.log('END OnMouseUp');
});
Clicking on the left mouse button and releasing results in the following printout, which shows that the function OnMouseUp ends before the function OnMouseDown ends, which fits figure1.
BEG OnMouseDown
BEG OnMouseUp
END OnMouseUp
Inside OnMouseDown: Finished sleeping
END OnMouseDown
You can try async await,
Define an async function then use await keyword on the mouswdown event, it will not fire the next event untill the the async function is done
What i'm understanding is that you want to record events in the sequence they have fired.
Please check this solution:
// The mousedown event is fired when a pointing device button (usually a mouse button) is pressed on an element.
var ismousedown = false;
document.addEventListener('mousedown', function(e) {
e.preventDefault();
ismousedown = true;
console.log('BEG OnMouseDown');
});
// The mouseup event is fired when a pointing device button (usually a mouse button) is released over an element.
document.addEventListener('mouseup', function(e) {
e.preventDefault();
if(ismousedown){
ismousedown = false;
console.log('BEG OnMouseUp');
}
});
Is this what you're looking for? There is something else i have missed?
I solved the problem by:
implementing a sleep based on here
introducing a flag onMouseDownStillProcessing that is set to false/true at the beginning/end of OnMouseDown, respectively.
waiting in the beginnning of OnMouseUp for onMouseDownStillProcessing to become true.
I have a button when pressed or on mouse-down event on it sends a command. It should also send a command when the button is released(as we don't have any release event, to my knowledge), I am using mouse-up event on the button. When i use the long press on the button from computer browser the mouse-up event works, But when i use mobile browser, if i do a long press on it the mouse up event is not fired, as the mobile browser will have text selection feature on long press. Could some one help me with this.
When the user interacts with your application using a mouse, it will respond via 'click' event, but when the user uses touch enable devices and touches the screen both 'touch' and 'click' event will occur.
for the single touch following events will occur in order :
touchstart
touchmove
touchend
mouseover
mousemove
mousedown
mouseup
click
one other 'touchcancel' will occur if the touch is interrupted.
When the user touches the screen, mouse events also executes. To avoid this, stop the default actions of touch events using preventDefault() method of event handler object,(e.preventDefault(); where 'e' is the event handler object).
Example :
let timeIn, timeOut;
const touchStart=(e)=>{
e.preventDefault();
console.log('touch start');
timeIn = Date.now();
}
const touchMove=(e)=>{
e.preventDefault();
timeOut= Date.now();
console.log('touch move');
}
const touchEnd=(e)=>{
e.preventDefault();
timeOut=((Date.now()-timeIn)/1000).toFixed(2);
console.log('touch end' , timeOut);
}
const mouseOver=()=>{
console.log('mouse over');
}
const mouseMove=()=>{
console.log('mouse move');
}
const mouseUp=()=>{
console.log('mouse up');
}
const mouseDown=()=>{
console.log('mouse down');
}
const mouseClick=()=>{
console.log('mouse click');
}
const touchCancel=(e)=>{
console.log('touch interrupted')
}
<div
ontouchstart="touchStart(event)"
ontouchmove="touchMove(event)"
ontouchend="touchEnd(event)"
onmouseover="mouseOver(event)"
onmousemove="mouseMove(event)"
onmouseup="mouseUp(event)"
onmousedown="mouseDown(event)"
onclick="mouseClick(event)"
ontouchcancel="touchCancel(event)"
>
touch me
</div>
To test this code on codepane : https://codepen.io/omiGit/pen/MVapRO
There is a good article on touch and mouse, must read: https://www.html5rocks.com/en/mobile/touchandmouse
There is a rect on mousedown mouseup click event . but when I click the rect mouseup Event dosen`t trigger https://jsfiddle.net/f0vbc94s/
there is my code:
var rect=d3.select(".text").append("rect")
.attr("width",1000).attr("height",1000)
.style("fill","#00ff00");
rect.on("click",function(){
d3.event.preventDefault
d3.select(this).style("fill","#000000")
})
.on("mousedown",function(){
d3.select(this).style("fill","#ff0000")
}).on("mouseup",function(){
d3.event.preventDefault;
d3.select(this).style("fill","#00ff00")
})
Your click event is overwriting the mouseup event. When you click
and hold the mouse at down position, mousedown event fires and
changed the color. When you release the mouse, mouseup event fired,
changed the color and then click event fired immediately and changed
the color. So you couldn't recognise it.
If you comment the click event, you can see the mouseup event fired.
Try this,
var rect=d3.select(".text").append("rect")
.attr("width",1000).attr("height",1000)
.style("fill","#00ff00");
//rect.on("click",function(){
//d3.event.preventDefault
//d3.select(this).style("fill","#000000")
//})
rect.on("mousedown",function(){
d3.select(this).style("fill","#ff0000")
}).on("mouseup",function(){
d3.event.preventDefault;
d3.select(this).style("fill","#00ff00")
})
I'm making a Firefox extension to record user clicks on a website. I'm using eventListener to detect clicks on any elements on the website but for some reason clicks on input elements or dropdown options are not registered. Any idea on why this is? Here's the code for the extension:
alertClick : function(aEvent) {
document.addEventListener('click', function(e) {
window.alert("click");
}, false);
Moving to solution:
Instead of click try mouseup or mousedown. The reason is because click does not fire IF you mousedown then move your mouse too much and/or wait a long time and then do mouseup.
Sorry didn't really know how to word it. But I have a div in which I want all the elements in it to have a .stopPropagation. But I want to do it on click and touch events like touchstart touchend touchmove tap dbltap dragstart dragmove dragend
So I was thinking I could do this:
$('#div1').find('*').bind("click touchstart touchend touchmove tap dbltap dragstart dragmove dragend", function(event){
event.stopPropagation();
});
But I'm not sure if this is the correct way of doing it. Maybe I need a .each()?
Also, I've never used the '*' to select all, so I'm not sure if it should be the way I have it or if it should be .find(*) without the single quotes.
Thanks!
There is no need to use .find('*'), if you want to stop the propagation from div1 - if the event happens in an descendant it will propagate up till div1 and then will stop there
$('#div1').on("click touchstart touchend touchmove tap dbltap dragstart dragmove dragend", function (event) {
event.stopPropagation();
});