I need to do some actions after touch in any part of the screen. At this moment, I am using something like this:
update: function() {
if (this.game.input.activePointer.isDown) {
this.game.input.keyboard.onDownCallback = null;
this.start();
}
}
But I just don't feel it right, while I probably can use callbacks as I do with a keyboard:
this.game.input.keyboard.onDownCallback = function(e){
this.game.input.keyboard.onDownCallback = null;
self.start();
}
Is there any way to use callback on touch instead of checking in update?
this.game.input.onDown.add(function() {
console.log("input captured");
});
As simple as that. It will work for mouse and for touch.
Related
I have a problem that i never had before.
I wanna call a function when a mobile device change is orientation, so i'm using "onorientationchange" and to be sure it's triggered, i also use "onresize".
The problem is that the even don't work on the page for a mysterious reason :
if i do
document.body.addEventListener("resize",function(){console.log("here")};
it doesn't work, I so created a custom version of AddEventListener :
function addNewEvent(elementDOM, evenement, fonction){
var refEvent = null;
if(elementDOM)
{
elementDOM["on"+evenement] = fonction;
if (elementDOM.attachEvent)
{
refEvent =function() {
return fonction.call(elementDOM,window.event);
};
elementDOM.attachEvent ('on'+evenement,refEvent);
}
else if (elementDOM.addEventListener)
{
refEvent = fonction;
elementDOM.addEventListener (evenement,refEvent,false);
}
else
{
elementDOM["on"+evenement] = fonction;
}
}
return refEvent;
},
And even this one don't work...
BUT this works :
document.body.onresize = function(){console.log("here")};
it's a normal webpage, i don't get why it doesn't work.
Can you help? :x
resize events fire on the window object, not the body element.
You're listening for it in the wrong place.
window.addEventListener("resize",function(e){console.log("here", e.target)};
I've been working on webpages for a range of touch screen devices, and one of the most consistent problems is how touch events are handled.
Is there a nice way to only call a function once even when multiple (roughly) simultaneous events call it?
e.g.
$("body").on("mousedown touchstart MSPointerDown", function () {
alert("This message will appear multiple times on some devices.");
})
I've thought about using a timeout so the function can only be called once every 200 milliseconds or something similar (off the top of my head and untested):
var allowed = true;
$("body").on("mousedown touchstart MSPointerDown", function () {
if(allowed){
allowed = false;
alert("This message will hopefully only appear once!");
setTimeout(function () { allowed = true }, 200);
}
})
(For this question, I am NOT looking for plugin suggestions, I am aware there are lots of touch event plugins)
Is there a proper/nicer way to use multiple events as possible triggers for a single function? Could I alias the events in some way without breaking their other uses?
In effect, you're looking to take only the first event type that comes through and ignore all the others. This will still fire for future clicks/touches. Enter closures.
$(document).ready(function() {
function alertClosure() {
var eventType = null;
function doAlert(e) {
if (!eventType) {
eventType = e.type; // only the first eventType we get will be registered
}
if (e.type == eventType) {
alert("This message will hopefully only appear once!: " + e.type);
}
}
return doAlert;
}
$("body").on( "mousedown touchstart MSPointerDown", alertClosure() );
});
http://plnkr.co/edit/oz48d3
You could use $.one (rather than $.on)
Here : $.one documentation on jquery.com
If you want it to be subsequently called then you could rebind the handler on a timeout, something like this:
function handler(){
var called = false;
return function(ev){
if(!called){
called = true;
$("ul#messages").append($("<li>").text("event"));
setTimeout(bind, 1000); // rebind after a suitable pause
}
}
}
function bind(){
$("ul#messages").one("click", new handler())
};
$(function(){
bind();
});
https://jsfiddle.net/p3t6xo48/5/
This allows each bound handler to be run once, and once only, for multiple events, then it's rebound after a suitable pause.
I'm using Hammer.js to listen for horizontal pan on an element.
When the deltaX has reached a threshold I would like to kill the current pan forcing a "panend" and resuming panning the next time a user attempts a "panstart".
Reading through the documentation it doesn't appear to be possible with the library right now.
Anyone know of a solution?
var mc = new Hammer.Manager(#option_elm.get(0),
recognizers: [
[Hammer.Pan,{direction: Hammer.DIRECTION_HORIZONTAL}]
]
)
mc.on('panleft', function(e) {
e.kill() // something simple like this...?
})
I had the same problem. Hammer.js has a build in method named stop();. You can use it like this inside your "penleft" event function: mc.stop();
http://hammerjs.github.io/api/#stop%28[force]%29
This wont force "penend". Hammer.js will just ignore all inputs. Unfortunately this method has a huge bug. The event object will have wrong parameters on all new inputs:
https://github.com/hammerjs/hammer.js/issues/811
So i used to use a helper variable, called "isFired". Your code can look something like this:
var mc = new Hammer.Manager(#option_elm.get(0),
recognizers: [
[Hammer.Pan,{direction: Hammer.DIRECTION_HORIZONTAL}]
]
),
isFired = false;
mc.on('panstart', function(e) {
isFired = false;
});
mc.on('panleft', function(e) {
if (!isFired) {
isFired = true;
yourCustomCallback();
}
});
mc.on('panend', function(e) {
isFired = false;
});
It is important to reset this variable to false on "penstart" and "panend".
I know that mousedown happens when a user depresses the mouse button, mouseup happens when the release the mouse and click is of course two events mousedown and mouseup. I have three different events each dealing with these three events mouseup down and click. My question is how to differentiate between the three, now my mouse down has a timer, so I was thinking of adding a boolean in that timer and testing it within the click I tried this and it didn't work to my standards.
Mousedown- timer checks for certain classes then if none of these classes exist within the targeted element proceed
Mouseup- clear the timer
Click- open a module
I may have not made the boolean a global variable that each can read or not, or I am missing something completely. Here is an example quick code of my full code:
var isDown = false;
ee[i].addEventListener('click',function(){
if(isDown===false){
openModule();
}
},false);
ee[i].addEventListener('mousedown',function(){
var timer;
var $this = this;
timer = setTimeout(function(){
if($this.className == "class"){
isDown=true;
createActive();
}
},500);
},true);
ee[i].addEventListener('mouseup',function(){
clearTimeout(timer);
},false);
That is just a quick example. I may have missed some coding but I hope you catch my drift in the code above. Anyone know of a good way to differentiate between the three events?
I've rewritten your code utilizing jQuery...
var isDown = false;
var timer;
$('.class').mousedown(function(){
isDown = false;
timer = setTimeout(function(){
isDown = true;
//createActive();
console.log('MOUSE DOWN');
}, 500);
}).mouseup(function(){
if(isDown === false){
//openModule();
console.log('CLICK');
}else{
console.log('MOUSE UP');
}
clearTimeout(timer);
});
If you simply add jQuery to your page, my code will automatically attach itself to any element in your document with a class of 'class'.
I've commented out your createActive(); and openModule(); calls so that you can play around with it (viewing your javascript console at runtime will show you the script in action - remove the console.log() stuff when you're done playing). This code could be optimised a bit more but it will give you the general idea.
Your timer variable needed to be created globally (I moved it out of the function).
In this case (declaring a mousedown time barrier) the click function will be rendered useless so I've improvised it into the mouseup function.
It's good to know core javascript, but jQuery is just too easy and powerful to ignore.
Try this:
const isDown = ref(false)
const timer = ref(0)
const mouseDown = () => {
isDown.value = true
timer.value = setTimeout(() => {
isDown.value = false
}, 120)
}
const mouseUp = () => {
if (isDown.value === true) {
hideModal()
} else {
return
}
clearTimeout(timer.value)
}
I'm trying to detect keydown and keyup, while the window is being resized. What I've tried so far, only fires the key events after the resize is finished.
$(window).resize(function(){
console.log("resizing");
});
$(window).keydown(function(e){
$("#key").css("background","green");
});
$(window).keyup(function(e){
$("#key").css("background","red");
});
Okay, so part of the problem you may be running into here is that keydown isn't an on or off thing, it's a fire-constantly thing.
The same is true of onresize.
As you resize the window the event gets called over and over.
Also, because JS isn't multithreaded, only one of these events is going to happen at one time.
The other event is going to be queued up to run immediately after the other event finishes.
So what you actually want is a state machine that one event sets, and the other event checks.
Quick examples:
var BrowserWindow = { width : 0, height : 0, prevWidth : 0, prevHeight : 0 };
window.onresize = function (e) {
/* set prevWidth/prevHeight, get new width/height */
};
window.onkeydown = function (e) {
if (BrowserWindow.prevWidth !== BrowserWindow.width) { /*...*/ }
};
That would work (except that it would only work when the screen was actively being stretched... so it wouldn't happen in the case where the key was down and the edge of the window was being held but not dragged (which might lead to flickering if the browser fires keydown events more-frequently than resize).
The more appropriate answer would likely be to go the other way:
var Keyboard = {
currentKeys : {},
previousKeys : {}
};
window.onkeydown = function (e) { Keyboard.currentKeys[e.keyCode] = true; };
window.onkeyup = function (e) { delete Keyboard.currentKeys[e.keyCode]; };
window.onresize = function (e) {
var key = <X>,
state = "";
state = Keyboard.currentKeys[key] && !Keyboard.previousKeys[key]
? "pressed"
: !Keyboard.currentKeys[key] && Keyboard.previousKeys[key]
? "released"
: Keyboard.currentKeys[key] && Keyboard.previousKeys[key]
? "held"
: "off";
Keyboard.previousKeys = Keyboard.currentKeys;
doSomething(state);
};
This is less than perfect from an architecture standpoint, but is more along the idea of what you'd have to do in another environment.