Develop Reference

Problem with onClick in React. On desktops works very well, on mobile doesnt work

just like up, i have problem with onClick it doesnt work on mobile.
{buttonSkills.map((item, i) =>
<Button key={i} variant={item.variant} onClick={() => filterIcons(`${item.className}`)}>{item.name}</Button>
)}
you may see this https://retupk.github.io/presentation/#/
click F12 and see that on mobile buttons ("Wszystko", "Front-End" etc..) in section skills at the very bottom doesnt work
here is full code of my skills section: https://github.com/RetupK/presentation/blob/master/src/containers/skills/Skills.js
Anybody know why my onClick doesnt work on mobile?

You have a container with the following css over the entire page, which gets all the click events:
.header-main-container {
z-index: 9999
}
If you'll remove it you clicking would work.

Touchstart firing twice on mobile

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');
});

Sencha Touch App freeze when multitouch / Android

I built a sencha touch (2.1.0) app and tested it on my Samsung Galaxy S2 (Android 4.0.3).
Once I did that with the native build command of snecha cmd and another I wrapped it with phonegap.
Both times I've got a freeze when I touch the screen with two fingers at the same time.
I cannot press a button or scroll anymore.
Has anyone a solution for that problem?
I also read the post in the Sencha forum (http://www.sencha.com/forum/showthread.php?249581-Multi-touch-and-phonegap), but that did not work for me or I'm doing something wrong.
Any help would be appreciable.

I recently came across this problem and visited the Sencha Forum link you mentioned and implemented it in my code which achieve the following.
1. With the fix incorporated app will never freeze with simultaneous tap.
2. You will have to tap somewhere on the screen one more time, after you simultaneously tapped at two or more points earlier.
Note: The issue is reproducible only with android 4.0.x and Sencha 2.1.
A big thanks to TROELS from Sencha Forum
In your app.js place the if condition outside your Ext.application as shown below
Ext.application({
name:xyz
requires:[abc]
//other stuffs
});
if(Ext.os.is.Android && Ext.os.version.equals(4.0)) {
Ext.define('app.overrides.TouchGesture', {
override: 'Ext.event.publisher.TouchGesture',
reset: function(e){
if(Ext.os.version.equals(4.0) && this.currentTouchesCount > 0){
e.changedTouches = Ext.Object.getValues(this.currentTouches);
this.onTouchEnd(e);
}
}
});
window.orgPinchEndMethod = Ext.event.recognizer.Pinch.prototype.end;
Ext.define('app.overrides.Pinch', {
override: 'Ext.event.recognizer.Pinch',
end: function(e){
var wasTracking = this.isTracking,
result = window.orgPinchEndMethod.apply(this, arguments);
if(wasTracking){
this._resetDetection(e);
}
return result;
},
_resetDetection: function(e){
var tg = Ext.event.Dispatcher.getInstance().getPublishers().touchGesture;
setTimeout(function(){
tg.reset(e);
}, 0);
}
});
}

Disable touch events in phonegap (xcode iOS)

I am having the most annoying situation. Ok, here goes. I am using a javascript based sliding menu for a mobile app. The "slider" works just like Facebook mobile, where you can click the button to show the menu on the left and click it again to close the menu. As an alternative, if you touch the still visible part of the page when the menu is showing it will also close. And that's it.
Problem: Note that I'm using Phonegap for this app. When I run the iOS simulator in Xcode all works fine EXCEPT if you swipeleft, for example, the page will move. I want to disable the swipe event all together. I have tried preventDefault, return false etc. Nothing seems to work. Again, my only goal is to disable touch events because for this app, I simply don't need them. Please see the javascript code for the menu show/hide below.
Thanks is advance. All is appreciated.
$(function(){
var menuStatus;
// Show menu
$("a.showMenu").click(function(){
$('#menu').show();
if(menuStatus != true){
$(".ui-page-active").animate({
marginLeft: "170px",
}, 300, function(){menuStatus = true});
return false;
} else {
$(".ui-page-active").animate({
marginLeft: "0px",
}, 300, function(){menuStatus = false});
return false;
}
});
// Menu behaviour
$("#menu li a").click(function(){
var p = $(this).parent();
if($(p).hasClass('active')){
$("#menu li").removeClass('active');
} else {
$("#menu li").removeClass('active');
$(p).addClass('active');
}
});
});

You could over-ride the $.event.special.swipe.horizontalDistanceThreshold to a larger value and prevent swipes on your page from triggering the swipe event.
Refer to Touch Events -> Swipe

jQuery.mobile popup immediately hides after showing

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.