I have the following code to prevent the buttons to stay focused after they are clicked. It works perfectly for desktop but it doesn't work at all when testing on mobile devices (Both iOS & Android), I'm not sure if I'm missing something here (I already tried replacing click with touchstart and touchend).
this.renderer.listen('document', 'click', (event) => {
if (event.target.nodeName === 'BUTTON') {
event.target.blur();
} else if (event.target.parentNode.nodeName === 'BUTTON') {
event.target.parentNode.blur();
}
});
Ok so I figured it out, in case anyone ever comes across this situation:
It WAS actually working, but on mobile devices an "emulated" hover is also applied after pressing buttons, so what I was seeing was the hover state, not the focus one.
I fixed it by wrapping the hover style of my button inside this block, to make sure that the device supports ACTUAL hover (e.g. using a mouse):
#media (hover: hover) {
your-element:hover {
//hover style
}
}
Related
i have the following event listeners defined in vanilla js
link.addEventListener("touchstart", function (event) {
event.preventDefault();
});
link.addEventListener("touchend", function (event) {
event.preventDefault();
});
link.addEventListener("click", function (event) {
event.preventDefault();
});
The event being prevented is a page load (the target elements are a tags)
Elsewhere (in a different JS file) there is code which makes a dropdown appear when the targeted elements are clicked on.
This works fine in many other browsers (chrome pc and mac, firefox pc, safari mac, edge, IE 11, iphone safari, ipad safari)
but chrome on android is behaving differently
with those preventDefault statements on the dropdown menu does not appear when the links are clicked.
I have tested this by commenting out the preventDefaults and the dropdowns appear.
chrome dev tools shows that the first preventDefault is the one being run when they are not commented out.
what could be causing this?
It's because touchstart prevents click event. You can prevent touchmove instead to prevent links. See related question - Why onclick event suppressed, when preventDefault() is called for the touchstart event?
Situation: hammer.js 2.0.4, jQuery 2.1 on a Cordova cross-platform mobile app. I was running into well-documented (for example) issues with delay of click events, so I thought I'd try hammer.js for this. It works beautifully on my iPad, but on my Android phone (Android v4.4) is dreadful: very slow to respond, and frequently misses taps entirely.
I implemented my own small tap detection (using mouseUp events) and it performs much better than Hammer.js on my Android (but terribly on my iPad).
So my question is: are there known issues for hammer.js on Android, or known workarounds? I'd really prefer not to conditionally use two different approaches based on platform, especially when there is no conceivable way for me to test all possible mobile platforms.
Example of the hammer.js tap code; nothing very interesting going on:
$(".menuitem").each( function(i, elem) {
var mc = new Hammer.Manager(elem);
mc.add(new Hammer.Tap());
mc.on("tap", action);
});
In addition there is a top-level swipe recognizer that covers the entire page:
var swipelistener = new Hammer($("body")[0], {
recognizers: [[Hammer.Swipe,{ direction: Hammer.DIRECTION_RIGHT }]]
});
swipelistener.on("swipe", swipeRight );
In total there will be fewer than two dozen elements responding to tap events, and no overlapping or nested elements. I thought it might have something to do with the swipe recognizer overlapping the tap recognizers, but removing the swipe listener didn't change the tap behavior at all.
You need to play with the settings of each recognizer.
hammertime.get('swipe').set({
direction: hammer.DIRECTION_ALL, threshold: 1, velocity: 0.1
});
This worked for me for swipe on 4.1.1
Would be really helpful if someone could write some example code for tap as I'm still fiddling with that.
Also, you don't need mc.add as the Manager by default has all the recognizers. You only need to use .add once you've manually removed (using mc.remove) one.
If you are unsure what settings any of the recognizers have, look on their website eg http://hammerjs.github.io/recognizer-swipe/ shows that I could set direction, threshold and velocity etc as per the code above.
As I can see you need to detect swipe on entire screen without any specific options. Maybe cordova-android-gestures (only for Android) helps you? This plugin "catches" gestures on total device surface. So, for detect swipes:
//check the platform
if (device.platform=="Android") {
MegaduckGestures.swiper(function(direction){
switch (direction) {
case 'rightSwipe':
//do your staff
break;
case 'leftSwipe':
//do your staff
break;
default: break;
}
});
}
else {
//use your iPad approach
}
And for handling tap on menu item:
$(".menuitem").each( function(i, elem) {
//check the platform
if (device.platform=="Android") {
MegaduckGestures.swiper(function(direction){
if (direction=='singleTap') {
//do your staff
}
});
}
else {
//use your iPad approach
}
});
I've tried both techniques in this answer to get a "dragging touch highlight" across elements in my PhoneGap App (testing on Android).
Here's my JSFiddle of the touchmove approach
$("td").bind("touchmove", function(evt){
var touch = evt.originalEvent.touches[0]
highlightHoveredObject(touch.clientX, touch.clientY);
});
Here's my JSFiddle of the vmousemove approach
$("#main").bind("vmousemove", function(evt){
$('.catch').each(function(index) {
if ( div_overlap($(this), evt.pageX, evt.pageY) ) {
$('.catch').not('eq('+index+')').removeClass('green');
if (!$(this).hasClass('green')) {
$(this).addClass('green');
}
}
});
});
Both work perfectly when emulating the app from desktop browser. Both work when viewing the JSFiddles from my Android tablet browser. But in the installed app on the tablet, it doesn't work. Instead of an updating highlight as I drag across the elements, all I get is a highlight on the first-touched event. The same for both methods.
Any ideas what's going on?
A comment on this question has an intriguing suggestion that "If you are running on android you also need to cancel the touchmove event to get new ones while touching. Don't ask me why...". Does that ring a bell, and if so, how would I "cancel the touchmove event to get new ones" with either of these approaches?
Alternately, has anyone successfully done a "dragging highlight" effect on a PhoneGap app, and would you care to share your technique?
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.
I've seen/heard all about disabling text selection with the variations of user-select, but none of those are working for the problem I'm having. On Android (and I presume on iPhone), if you tap-and-hold on text, it highlights it and brings up little flags to drag and select text. I need to disable those (see image):
I've tried -webkit-touch-callout to no avail, and even tried things like $('body').on('select',function(e){e.preventDefault();return;}); to no avail. And the cheap tricks like ::selection:rgba(0,0,0,0); won't work either, as hiding these won't help - selection still happens and it disrupts the UI. Plus I'm guessing those flags would still be there.
Any thoughts would be great. Thanks!
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
This will disable it for every browser going.
Reference:
jsFiddle Demo with Plugin
The above jsFiddle Demo I made uses a Plugin to allow you to prevent any block of text from being selected in Android or iOS devices (along with desktop browsers too).
It's easy to use and here is the sample markup once the jQuery plugin is installed.
Sample HTML:
<p class="notSelectable">This text is not selectable</p>
<p> This text is selectable</p>
Sample jQuery:
$(document).ready(function(){
$('.notSelectable').disableSelection();
});
Plugin code:
$.fn.extend({
disableSelection: function() {
this.each(function() {
this.onselectstart = function() {
return false;
};
this.unselectable = "on";
$(this).css('-moz-user-select', 'none');
$(this).css('-webkit-user-select', 'none');
});
return this;
}
});
Per your message comment: I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.
I would simply would use a wrapper that is not affected by this plugin, yet it's text-contents are protected using this plugin.
To allow interaction with a link in a block of text, you can use span tags for all but the link and add class name .notSelected for those span tags only, thus preserving selection and interaction of the anchors link.
Status Update: This updated jsFiddle confirms you concern that perhaps other functions may not work when text-selection is disabled. Shown in this updated jsFiddle is jQuery Click Event listener that will fire a Browser Alert for when the Bold Text is clicked on, even if that Bold Text is not text-selectable.
-webkit-user-select:none; wasn't supported on Android until 4.1 (sorry).