I am having some trouble with a mobile menu. At first i had my code written like this which worked fine on desktop
$('#nav-icon3').click(function(){
$(this).toggleClass('open');
});
$('.menu-item').click(function(){
$('#nav-icon3').toggleClass('open');
});
after uploading and checking on my mobile device via android chrome the click function was not working, so i tried using the touchstart.
$('#nav-icon3').on('touchstart', function(){
$(this).toggleClass('open');
});
$('.menu-item').on('click touchstart', function(){
$('#nav-icon3').toggleClass('open');
});
when touching the menu-item element, the toggle fires twice. Anyway I can prevent this from happening and let it only fire once?
I think what is going on based on your question is that your event is propagating. What you can do is the stop the event from propagating by doing something like this.
$('.menu-item').on('click touchstart', function(e) {
e.stopPropagation();
$('#nav-icon3').toggleClass('open');
});
More reference here:
https://api.jquery.com/event.stoppropagation/
Using e.preventDefault(); worked for me when I had the same issue as you.
$('#nav-icon3').on('touchstart', function(e){
e.preventDefault();
$(this).toggleClass('open');
});
Related
I'm developing phonegap/cordova apps with ember. To use the backbutton functionality from android, it's important to send the "backbutton" event to my ember-App. How do I send an event to an ember application?
I found this ember-specific mixin very useful. Give it a try, Ember bindings for using phonegap events.
I had faced this problem recently. I attached the backbutton eventlistener on 'didInsertElement' event in my Ember View.
App.IndexView = Ember.View.extend({
_eventonInsert : function () {
document.addEventListener('deviceready', function(e) {
document.addEventListener('backbutton', function(e) {
//Your logic related to back button
});
});
}.on('didInsertElement')
});
I built a doodle app in html + Cordova/Phonegap. I use jquery(elem).on(touchstart/-move/-end) to listen to touchevents. But this seems to be broken in Android 4.4; it only fires touchstart.
Any tips?
EDIT: here's the code
$("#canvas_doodle").on("touchstart", function(e){ doo.touchBegin(e); });
$("#canvas_doodle").on("touchmove", function(e){ doo.touchMove(e); });
$("#canvas_doodle").on("touchend", function(e){ doo.touchEnd(e); });
Thanks Steve P, but I figured it out (forgot to answer the question).
Somehow I forgot to call e.preventDefault() in touchBegin and touchMove, which caused touchEnd to never fire when dragging.
Try:
$(document).on("touchstart", '#canvas_doodle', function(e){ doo.touchBegin(e); });
...
I'm using phonegap (cordova 2.8), and android 4.2.1,
I use as frame works: knockout, & jquery mobile.
The app is based on http://propertycross.com/jquery-mobile/
I get the following funny behavior:
when clicking on a button that moves to another screen #2,
if there is a button in #2 screen at the same location,
then it get clicked as well...
The only solution I found is to wrap the code that change the screen with setTimeout:
setTimeout(function() {
application.navigateTo(viewModel);
},600);
This solve the problem but slow down the app...
This is actually unfortunate since the phonegap is already too slow...
Thanks.
There are two things you can do:
1) e.stopPropagation(), e.preventDefault()
phopkins describes this here:
jQuery mobile tap event triggered for twice
I'll elaborate, as this was a major issue for me. This applies to any of the tap, click, vclick and probably other events.
Your event functions should have stopPropogation() and preventDefault() called, like so:
$('#selector').tap(function(e) {
//your code here
e.stopPropagation();
e.preventDefault();
});
This helps, however, I found that you could still get the "phantom" click.
2) Bind the event to the page, not the button.
That way it's not bound to the next page.
For example, for a page with id='myPage' and a button with id='myBtn':
$('#myPage').on('tap', '#myBtn', function(e) {
//your code here
e.stopPropagation();
e.preventDefault();
});
I have a small phonegap application with jquery mobile and backbone.
I'm trying to show popup to user by manually calling .popup() method.
Everything works fine on iOS but on android I got strange issue: popup is showing for few moments and than disappear.
Here the actual code:
var PostView = Backbone.View.extend({
events: {
'touchend .add-comment-button': 'addComment'
},
addComment: function() {
this.$(".comment-popup").popup('open', { history: false });
return false; // Stop bubbling.
}
});
I'm using history: false because this popup is actualy part of subpage.
The code looks very simple, I'm just can't understand why it can disappear, and why this happen only on android devices.
Thanks, and sorry for my bad english.
I spent hours trying to fix this problem.
Finally I ended up doing the following two things that seemed to fix the problem.
1 - Use the uncompressed jqm file. i.e jquery.mobile.1.2.0.js
2 - I was triggering the popup programatically using the 'tap' option - once changed to the 'click' option it worked.
$('.option').live('click', function() {
$('#popup-div').popup('open');
});
I spent hours trying to fix this problem.
Finally I ended up doing the following two things that seemed to fix the problem.
this code snippet may help you ->
$('#testBtn').on('tap',function(e){
console.log("button clicked");
e.preventDefault();
$('#testPOPUP').popup("open");
});
Please note i have used e.perventDefault().
I didn't feel like changing my .tap() events to the click event and I didn't have a case where I could use preventDefault()so I just added a timeout to the popup('open') line. My hoverdelay in jqm is set to 150 so I set this timeout to 600 just to be on the safe side. Works fine, doesn't feel sluggish for the user.
One way to 'fix' it is by setting data-history="false" on the popup div
See also this question
JQuery Mobile popup with history=false autocloses
I have the exact same problem when trying to use popup('open') on an android 2.3 device (both in native browser and in firefox) and it works just fine on browsers on other devices. I'm also using backbone event management to open my popup (used the tap event and no aditionnal options to popup).
What I did to 'correct' the problem is that I removed the backbone event management for this event and added a listener in the render function. In your case this would look something like this :
events: {
// 'touchend .add-comment-button': 'addComment'
},
render: function() {
$(this.el).html(this.template(this.model));
$(this.el).find('.add-comment-button').tap(function(el){
this.addComment(el);
return false;
}.bind(this));
}
I have no idea where the problem comes from (must be some incompatibility between backbone and jquery mobile) and why we only see it on android but for the moment with this workaround my app seems to work fine on any device.
Edit: oops, it turns out that in my case the problem was I was missing "return false;" in the function dealing with the event.
Now that I added it, it works correctly with the backbone event management.
Sadly that doesn't explain why you have the issue and why I was seeing it only on android.
In case it helps anyone, I had the same problem occurring with Bing Maps, with the Microsoft.Maps.Events.addHandler(pin, 'click', callback) method.
Not particularly nice, but instead I stored an ID in pushpin._id and did the following:
$("#page").on('vclick', function (event) {
if (event.target.parentElement.className === "MapPushpinBase") {
$("#stopPopup").popup('open');
}
});
One brute force option is to check whether popup was hidden and reopen it.
In a loop, because the exact time the popup becomes hidden seems to be varied.
var hidden = $('#' + id + '-popup') .hasClass ('ui-popup-hidden')
if (hidden) $('#' + id) .popup ('open')
A working example: http://jsfiddle.net/ArtemGr/hgbdv9s7/
Another option could be to bind to popupafterclose:
var reopener = function() {$('#' + id) .popup ('open')}
$('#' + id) .on ('popupafterclose', reopener)
$('#' + id) .popup ('open')
Like here: http://jsfiddle.net/ArtemGr/gmpczrdm/
But for some reason the popupafterclose binding fails to fire on iPhone 4 half of the time.
Is there a way to prevent scrolling of a rendered HTML page in the Android browser? The following does not appear to have any impact on page scrolling in the Android browser:
var preventDefault = function(e) {
e.preventDefault();
return false;
};
document.addEventListener('touchmove',preventDefault,false);
document.body.addEventListener('touchmove',preventDefault,true);
window.addEventListener('touchmove',preventDefault,true);
(I've tried with bubbling on and off.)
It looks to me like Android Webkit makes the "window" the same length as the document, so scrolling is being done on the browser itself, not on the document body or DOM window object. What's weird is that that's exactly what webkit on iOS does, but the code above still works.
Answering my own question.
The problem ended up being that you need to capture and suppress ontouchstart as well as ontouchmove on document to stop the browser from scrolling. This is definitely different in iOS, but it still works identically on both platforms.
The actual code I ended up using looks sort of like this:
var preventDefault = function(e){
e.preventDefault();
};
var touchstart = function(e) {
document.addEventListener('touchstart', preventDefault,false);
document.addEventListener('touchmove', preventDefault,false);
/*do other stuff*/
};
var touchend = function(e) {
document.removeEventListener('touchstart', preventDefault,false);
document.removeEventListener('touchmove', preventDefault,false);
};
element.addEventListener('touchstart', touchstart, false);
element.addEventListener('touchend', touchend, false);
Not works on Chrome on Android though
But preventing event on window and stopping immediate propagation helps!
Handler should be not passive to do that.
MAY BE adding an event handler on capturing phase would help too
But this snippet below is tested by me
window.addEventListener("touchmove", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
}, { passive: false });
DEMO https://codepen.io/ColCh/full/qvLqoe