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.
Related
I'm trying to prompt the user whenever he/she tries to navigate away from the current browser (refresh, close tab and window, clicking back button from the browser). I'm having this issue on IOS mobile that it does not fire pagehide and/or beforeunload.
I'm aware that Safari does not support beforeunload event anymore so I've added an event listener for pagehide with similar logic, and that too does not fire. Code is written in angular.
Approach tried:
// Method decorator, Did not work for both
#Hostlistner(window:pagehide), #Hostlistner(window:beforeunload)
doSomething(event:any){
event.returnValue = true;
return true;
}
// Component host property, Also tried this on beforeunload, did not work for both
#Component({
...
host: "(window:pagehide)" : "doSomething($event)"
})
// Plain javascript, have tried pagehide too, did not work for both
window.onbeforeunload = (event) => {
event.returnValue = true;
return true;
};
//Also tried binding it via addEventListener method of window/document, did not work for both
window.addEventListener('beforeunload', (event) => {
this.log("before unload");
event.returnValue = true;
return true;
});
I have been trying it via stackblitz: https://stackblitz.com/edit/angular-qkezha?file=src%2Fapp%2Fapp.component.ts.
Device use for testing the issue: IPhone 6, IOS 12.1
Issue arise on Mobile IOS both for Chrome and Safari, have not tested it in yet in Firefox but I doubt that it will work on there too. Code works on Android Chrome and Windows Desktop Chrome.
I've been on this for several days now. Searching here and there. Any help or hints is very much appreciated.
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.
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'd like to do the equivalent of chrome.tabs.onUpdated in Firefox. tabs.on('ready', function(tab){}) does not work because it does not detect the back button. How do I fire an action on every page load such that it also detects the back button using the Firefox SDK?
You'd have to use require('window-utils').WindowTracker to all windows, filter for browser windows with the require('sdk/window/utils').isBrowser(window) method, then listen to click events on the back button.
It's currently impossible, but will be possible in a future version of Firefox:
https://github.com/mozilla/addon-sdk/commit/e4ce238090a6e243c542c2b421f5906ef465acd0
A bit of a late answer, but for anyone reading this now (from 2016), it is now possible to do using the SDK!
Using the High-Level API tabs, you need to listen for the pageshow event. (More about this on MDN)
An example:
tabs.on('pageshow', function(tab) {
// Your code here
})
It is very similar to the load and ready events, the main difference being that is is also fired when a page is loaded from BFCache (which it is when the back button is pressed).
I think the following snippet gives the functionality of chrome.tabs.onUpdated
var tabs = require("sdk/tabs");
tabs.on('ready', function(tab){
console.log(tab.url);
});
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.