I have a sprite in my html5 game and it appears on the screen for a couple of seconds. User has to click it quickly before it's disappeared from the screen.
Hovewer every 3rd click (not literally 3rd, just approximately) is not fired..
Game is being handled in 'tick' function.
Here is a code snippet of click event subscribing and handling:
game_props.defenceBtnSprite.addEventListener("click", t.onDefenceClicked);
...
onDefenceClicked: function()
{
console.log("clicked!");
},
What would you check first to address this issue?
Related
I don't code so asking for help :-) Hi, I have an issue for a page animation with a couple of interactions. How do I insert a code snippet to tell the browser to either continue or pause the animation, when a user opens/clicks another tab.
Right now, the animation pauses for the first part, but the subsequent interactions keep going. And it's a jumbled mess.
What is the easiest/simple way to do this? Can someone share the full/complete code snippet to accomplish this? I've been searching for hours and can't seem to find the right solution.
I'm using Webflow for the site. Thanks a bunch.
When the user clicks away from a window, certain events are fired off. You can add event handlers to your window object that respond to these events.
You probably want to listen for 'focus' and 'blur' events. JavaScript:
window.addEventListener('blur', function (evt) {
// turn off your animation here
});
window.addEventListener('focus', function (evt) {
// turn on your animation here
});
Documentation on window blur event, window focus event, addEventListener().
I have a simple page that reports all window events, it might be useful:
https://terrymorse.com/coding/windowevents/index.html
I have a paper-button with the on-tap function that opens a paper-dialog that contains a "Accept" paper-button that will close it when clicked.
The problem i'm getting is if depending on my screen resolution, and the dialog's "Accept" button is over the initial button to open the dialog, when clicked, the dialog opens and closes. I'm assuming the on-tap event is being fired to both.
I've tried these 2 methods but they do not seem to help.
event.cancelBubble = true;
event.stopPropagation();
The problem is that a capacitive screens or even mouses can generate multiple tap event on the same spot within a few milisec.
The mouses because a quick change in a high and low voltage (logical 1 and 0) generating an AC signal wich can jump trough on a capacitator (which can be the button two contactor between the air) if the conditions matching. But the onclick event is already catching this case and you does not require to do anything to solve it.
The capacitve screens are capacitators and just rolling your finger should trigger multiple tap events because your skin has different depth of insulation and hard to mark the tap begin and end in some cases.
This physical problem should be solved by the platform, but it is not in every situation currently (but most of the devices are filtering this). Im usally solving this isse with a transparent overlay element wich can catch the pointer events for a little duration so I could catch the "prelling" of a button or the capacitive screen for a few ms.
If a 10-20ms is enough for you then wait a frame in your on-tap function with requestAnimationFrame and then show the dialog. Cheap trick, but it does what it has to, but ultimately you can wait a fix timeout to show the dialog, because you have 100ms to respond a user interaction.
You cannot fix this by manipulating the browser events options though because as I know you dont have option to how much time need to pass until the next same event should happend. But if you wait a frame thats could behave like you add a delay between the events.
I need to implement a behavior:
when element clicked - one thing happens
but when it's clicked and held for more than one second, something else happens (e.g element becomes draggable) and then the first event never fires
I think I know how to catch click&hold type of events, but how to distinguish between first and second?
Can you show me how to do that using this jsbin. I already made the "click, hold & drag" part, except that it is still firing the 'click' event after dragging the element and it shouldn't.
again: element clicked - one event, click and hold - element is draggable (even after mouse up) and when clicked again it's back to normal (undraggable) state.
I am not looking for a trivial solution, it has to be built using Rx.Observable or at least Bacon's streamEvent object
Thank you
I think you were pretty close with your solution, but probably it is not possible to elegantly achieve what you want while using the browser's built-in click event.
HERE is my attempt to tackle your problem.
The main idea is to define your own click streams like so:
var clicks = downs.flatMapLatest(function(){
return ups.takeUntil(Rx.Observable.timer(250));
});
var longDownsStart = downs.flatMapLatest(function(){
return Rx.Observable.timer(1000).takeUntil(ups);
});
In case of clicks we wait max 250 ms after a mouse down for a mouse-up; in case of the latter we generate the event only if there was no mouse-up within 1000 ms.
There might be some corner cases in which the code does not work as intended.
Here is my proposed solution (with Bacon.js).
I have this:
#Override
public void onTouch(final ControlTouchEvent event) {
int action = event.getAction();
if (action == Control.Intents.TOUCH_ACTION_PRESS) {
Log.d("Touch Test", "Touch: Press at " + event.getX() + " - " + event.getY());
}
else if (action == Control.Intents.TOUCH_ACTION_RELEASE) {
Log.d("Touch Test", "Touch: Release at " + event.getX() + " - " + event.getY());
}
}
Basically, its working but for single presses. Let me explain.
If you press the screen and release on same position, lest call it a "click" both logs get fired, the Press first, then the release.
But I want to manage scrolling, so, if I press, then move my finger, and release in other place of the screen, I only get the press event fired.
I want to know start position when pressed and end position when released, so I can scroll the layout!
How can I achieve that?
Thanks!
But I want to manage scrolling, so, if I press, then move my finger, and release in other place of the screen, I only get the press event fired.
I think that's because you are doing a swipe event, so on release it will trigger the Control.Intents.SWIPE_DIRECTION_[UP|DOWN|RIGHT|LEFT] action and not the Control.Intent.TOUCH_ACTION_RELEASE.
If you don't need the swipe events you can remove the Swipe intent from the manifest. Otherwise you should consider to use the SWIPE intents to manage the scrolling. The main difference is that with Swipe events you don't get the magnitude of the swipe you only get the direction, but that should be enough for the most cases.
The SmartWatch 2 is not functioning consistently in regard to the touch detection. Thus, not every TOUCH_ACTION_PRESS event is followed by a TOUCH_ACTION_RELEASE event (as it is the case for the SmartWatch 1), but it can be followed by a SWIPE event, for example. Also, the SWIPE events are too easily triggered, so any attempt to implement the scrolling as you want it, would not be successful.
Best thing to do is to use the Gallery and ListView for smooth scrolling.
As the others said, the "scroll" as is, is not supported.
The SDK is good, but lacks some functions. I hope Sony update it in the future, however, it may be too late now.
This is what I ended doing on my app:
I used a TOUCH_ACTION_PRESS to save the press action in a global object, then, I used the SWIPE event to get a direction.
In the Swipe routine, I ask if the PRESS event has been made, and if so, I do the "scrolling" with the SWIPE direction.
To get a better feel, I ask where the PRESS started on the Y axis, so, if lets say the pressed started at bottom of the screen, and the swipe was swipe up, I move the view more than if the press started at half screen.
It is not very smooth, but, I think there is no better way to do it. The other option is to use on screen buttons, but I do not like them.
I haven't fully understood this yet but I am getting three sets of events when I have not got any clickable objects:
For simple taps: onTouch(PRESS) followed by onTouch(RELEASE)
For swipes: onTouch(PRESS) followed by onSwipe()
Unfortunately for very short swipes, or slipped taps:
onTouch(PRESS) only
It appears to differ if you have clickable objects. This is the pattern I get when I do:
For simple taps: onTouch(PRESS) followed by onTouch(RELEASE) then onObjectClick
For all swipes: onTouch(PRESS) followed by onSwipe()
Since onSwipe only gives the direction and not the event (with location), I cannot find a satisfactory way of handling this except to process all events when I get on onTouch(PRESS) and then undo the tap operation if there is a follow up onSwipe. Depending on what you are doing this undo could be easy or really tricky - but if fast enough the user will never notice...
Turning off swipe in the manifest doesn't help - you just lose the onSwipe events and sadly don't gain the onTouch(RELEASE).
I've implemented iScroll into a web page, intended for a smartphone. I haven't tried this yet in an emulator so I don't know if this is just a PC problem.
The scroller contains a UL. Each LI is marked with an onclick event handler:
$("li.myitem").click(showItemDetails);
...
function showItemDetails() ...
When I implemented this prior to using iScroll, if I click ONCE on a LI I get one call to my click handler (which opens another view window). After using iScroll I have two bad behaviors.
When scrolling around, sometimes iScroll thinks that I want to click on something. That is, iScroll is working something like an "onmouseup" event.
When clicking on an event, whether intentionally or not, iScroll is generating 10, 20 and even 30 events (or event threads) for that one place that a single event is intentioned for. I traced it, and all of the events are coming from the same LI item. This occurs just as badly if I change the click handler to a double-click handler (dblclick()).
In the immediate, I'm reduced to putting in a gatekeeper, a flag saying "I'm already busy with an event, go away". I could also change the interface to have the user click (select) an LI and then click on a separate button to see the details.
But I'm concerned about what iScroll is doing.
Any ideas? Need to see code? I can't put on the whole app (a thousand lines long, after comments), but I can show decent snips. But I'm hoping that this is an "oh, yeah" moment and someone tells me a known story.