I listen for the taphold event on an element and then open a popup with choices of actions. The problem is, after the popup is opened, new mouse/finger events are triggered. So my solution is to trap all the subsequent mouse/finger events until the touchend event:
function tapholdTriggered() {
$.mcm.mobile.$d.on('vclick.taphold vmousedown.taphold click.taphold mousedown.taphold tap.taphold taphold.taphold touchstart.taphold touchmove.taphold', function (event) {
event.preventDefault();
event.stopImmediatePropagation();
})
.on('touchend.taphold', function (event) {
event.preventDefault();
event.stopImmediatePropagation();
$.mcm.mobile.$d.off('.taphold');
});
}
So basically I would listen for the taphold event, call tapholdTriggered(), then open the popup.
My question/issue is that I think I am excessively trapping events. I don't know what order the various mouse/finger events are fired in. So if someone could help me optimize the trapped events, I'd appreciate it.
Thanks.
I accomplished this a little differently using a screen that covers the body and then gets removed on touchend, mouseup, and vmouseup.
Related
In my ionic application for IOS I am listening to a window event generated by a cordova plugin.
Here is the code that I use for listen to the event and perform an action.
window.addEventListener('event', (event) => {
...
console.log("event received");
doSomething();
});
doSomething(){console.log("perform an action");}
Everything work and I am able to receive the event until I open the IOS Control Center (swipe up from the bottom). After I close the Control Center again I can see that the event is logged ("event received") but the function doSomething() is never called.
Someone encountered a similar situation?
Since the event is generated outside angular, I needed to call ngZone.run in order to let angular know that something happend and so trigger the change. I thid it this way
constructor(private zone: NgZone) {}
ngOnInit(){
window.addEventListener('event', (event) => {
this.ngZone.run(() => {
do stuff;
});
}
I would like to check for the user idle time since last touch and return the app to the home page after some period of time. I want this to be done using phonegap.
I googled and did find few solutions but I want to detect the idle time and return the app to the home page.
Thanks.
Using jQuery you *could bind a start touch event and end touch event then using a timer to execute a function
$('body').bind('touchstart',function() {
clearInterval(myTimer);
});
$('body').bind('touchend', function() {
myTimer = setInterval(function() {
/* return user to homepage */
},30000);
});
Touch events are a little buggy in mobile devices. But you set an Interval timer to run after a set amount of time after the last touch is detected. Remembering to clear it on the next touchstart event. Its a bit messy but should work (I havent tested it btw)
I got this working by setTimeout('Redirect()', 10000); where Redirect fn is function Redirect() { window.location.href="mylink.html"; }
I have this
A
B
<script>
$('a, button').bind('touchstart', function(e) {
$(this).trigger('click');
e.preventDefault();
});
</script>
The code is compile on phonegap + jquery mobile and testing on Nexus S.
My problem is when I touch on both A and B I did not see performance boost, what is happening?
Please help!
Peter this code is not going to give you a speed boost.
You don't need to bind touchstart on a tag. It is ok to use it on button. There is no point to trigger a click on element with touchstart event, touchstart is an event used to replace click events on mobile devices. But in case of android user tap event to get better performance. Touchstart is used for JQM executed on iPhone/iPad devices.
This is a code I am using to determine a type of tap event:
var userAgent = navigator.userAgent;
touchEvent = (userAgent.match(/iPad|iPhone/i)) ? "touchstart" : "tap";
No matter what event you choose you will have 300ms deley on mobile devices. Some plugins claim they can fix this problem but I never found successful one.
I hope this helps you.
Is there a way to capture backspace key press on a input[type="text"] in BlackBerry? I have tried with $('input[type="text"]').bind('keydown', function(event) { ... }); and it captures all key press events except the one for the backspace (del). Pressing this key does not fire any key event.
Does anyone know a way to capture the event?
I am developing for OS 6.0 and testing with BlackBerry simulator 9800.
EDITED - the code that I am testing
<div id="myPage" data-role="page" data-theme="b">
<div data-role="content">
<input type="text" id="ddd" />
</div>
<script type="text/javascript">
$('input[type="text"]').bind('keydown', function(e){
if(e.keyCode == 8)
alert('backspace trapped')
});
</script>
</div>
I have just come up against this annoyance, and found this question in my search for answers, so here are details of my investigation and solution (well, workaround).
The keyup and keydown events simply will not be triggered on input or textarea elements in the Blackberry browser when the backspace key is pressed. It will, however, be triggered when the event handler is bound to the document:
$("#myInput").keydown(someFn); //Will not fire for backspace
$(document).keyup(someFn); //Will fire for backspace
Why this is the case, I have absolutely no idea. The keyup event should bubble, and it does, but since it doesn't even fire when you press the backspace key, that's not much use.
However, there is another event at our disposal. The input event is supported by the Blackberry browser, and correctly fires any time the value of the element changes (including, fortunately for us, when that change is due to a press of the backspace key).
Therefore, we can kind of workaround the problem by binding event handlers to both keydown and input. The keydown event will fire before input, except if the backspace key is pressed, in which case keydown won't fire. So we can keep track of that quite easily:
function handler(e) {
if (e.keyCode === 8) {
alert("Backspace!"); //Backspace was pressed :)
}
}
var elem = document.getElementById("example");
elem.addEventListener("keydown", function (e) { //Bind to keydown event
this.keydownFired = true; //Remember that keydown fired in expando property
handler.call(this, e); //Call the event handler
}, false)
elem.addEventListener("input", function (e) { //Bind to input event
if (!this.keydownFired) { //Keydown didn't fire, must have pressed backspace
e.keyCode = 8; //Fix the event object
handler.call(this, e); //Call the event handler
}
delete this.keydownFired; //Clean up so we can handle next key press
}, false);
Some notes:
As far as I can tell this is only an issue in the browser on Blackberry 6. I've tested Blackberry 5 (physical device and simulator) and 7 (simulator) and both will fire the keydown and keyup events for the backspace key.
This "fix" works in almost every single browser I have tested it in (so you can use it to properly support Blackberry 6 without breaking other browsers) except Opera Mobile (tested in version 12), which for some reason likes to fire the input event twice sometimes.
This only allows you to detect backspace presses when there is text in the input to delete (otherwise the input event doesn't fire). This is probably the biggest downfall of the script.
You can find a working example here, but for mobile device testing it's quicker to load the embedded version.
the following code, works fine. you can see it on jsfiddle . tested it on chrome
$(document).ready(function() {
$('input[type="text"]').bind('keydown', function(e){
if(e.keyCode == 8)
alert('backspace trapped')
});
});
for Blackberry use
function captureBackButton() {
blackberry.system.event.onHardwareKey(blackberry.system.event.KEY_BACK,
function() {
alert('Backspace Pressed')
});
}
see detail
You can use this http://jsbin.com/ezucen/13/ to see what keycode you are getting back.
On BlackBerry 9900 7.1 I am getting keyCode 8.
There is no way to accomplish this in the general browser.
The only way to track the back key event using JavaScript is to use a
Widget/WebWorks application using KEY_BACK API.
I am using PhoneGap to create a native iOS app. The app implements an iOS scheme so that it can be invoked from mobile Safari like myapp://?parameters.
The app activities depend on the input parameters, i read those by handling the 'deviceready' event.
The problem is that after initial execution the app remains in the background, and any subsequent calls (from the browser) do not fire another 'deviceready', and as a result i cannot get the new parameters.
Any ideas? Thanks!
Did you manage to get the resume event to fire in the end?
I'm having trouble with this as well - I have the following code:
window.addEventListener('load', function () {
document.addEventListener('deviceready', onDeviceReady, false);
}, false);
function onDeviceReady() {
document.addEventListener('resume', onResume, false);
document.addEventListener('pause', onPause, false);
document.addEventListener('online', onOnline, false);
document.addEventListener('offline', onOffline, false);
}
function onResume() {
alert('resume');
}
function onPause() {
alert('pause');
}
function onOnline() {
alert('online');
}
function onOffline() {
alert('offline');
}
And although the deviceready and online events appear to be firing, I can't seem to get the resume event to fire. Any light anyone could shed on this would be much appreciated!
There is a 'resume' event. http://docs.phonegap.com/phonegap_events_events.md.html
It has been more than a year since the question was asked, but I want to reply for future readers anyway.
If you want your app to respond to url schemes after the initial load( on resume ), you need to define a function called handleOpenURL() in global context. Then this function will automatically be fired when your app resumes.
function handleOpenURL(invokeString) {
// do something with the invoke string
}