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?
Related
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
}
}
I've this following JS code, it's working perfectly in the desktop but it's not working in the touch devices.
jQuery(document).ready(function(){
jQuery("#gallery_trigger").click(function () {
jQuery(".my-second-portfolio").trigger( "click");
});
});
From my analysis, I figured that following line of code is not working
jQuery(".my-second-portfolio").trigger( "click");
I understand that .trigger( "click"); is not appropriate for the touch devices, so could you please help me to work this code in all devices?
Try 'tap' or 'vclick'
http://api.jquerymobile.com/tap/
$(".my-second-portfolio").tap();
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate. Because of this $(document).ready() will trigger before your first page is loaded and every code intended for page manipulation will be executed after a page refresh. This can be a very subtle bug. On some systems it may appear that it works fine, but on others it may cause erratic, difficult to repeat weirdness to occur.
Classic jQuery syntax:
$(document).ready(function() {
});
To solve this problem (and trust me this is a problem) jQuery Mobile developers created page events. In a nutshell page events are events triggered in a particular point of page execution. One of those page events is a pageinit event and we can use it like this:
$(document).on('pageinit', function() {
});
To execute a code that will only available to the index page we could use this syntax:
$('#index').on('pageinit', function() {
});
There's also another special jQuery Mobile event and it is called mobileinit.When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind them to mobileinit. One of a good examples of mobileinit usage is turning off ajax page loading, or changing default ajax loader behavior.
$(document).on("mobileinit", function(){
//apply overrides here
});
Or you could use something like this:
$('div:jqmData(url="index.html")').on('pageshow',function(){
// code to execute on that page
//$(this) works as expected - refers the page
});
You could try to use $('.my-second-portfolio')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/
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'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();
});
In a Kendo UI Mobile ListView, a script to open an external link by native browser is called when a link is clicked.
The PhoneGap script is as follow:
On Android:
navigator.app.loadUrl(link, { openExternal:true } );
On iOS:
window.open(link, '_system');
The link can be opened on the corresponding native browser.
However, when the user switch back to the app from the native browser, some problems happen.
On Android, the screen hung on the original view, when the back button is pressed again, the screen is un-freezed and can be refreshed.
On iOS, however, the screen is also hung on the original view. When tapped on the screen, the complete view (with the layout) is moved. There is no way to un-freeze this screen.
How to fix this so that the screen can be un-frezzed after switching back from the native browser to the app?
Thank you very much for your help.
Updated 1:
I changed the original tag to a tag, everythings work now. But I am still curious to see if it is certain kind of bugs for Kendo UI Mobile.
There is a serious problem with Kendo Mobile hanging the page completely, making the app totally unresponsive to touch/mouse. The offending CSS is in Loader.transition() which does this.container.css("pointer-events", "none") which is equivalent to:
document.body.style.pointerEvents = "none";
Ouch - that is ugly. Plus in _attachCapture there is offensive JavaScript for all mouse and touch events that does:
event.preventDefault();
Fatal if using an app with an embedded full page WebView/UIWebView (requiring app to be closed and restarted).
Hangs can happen if:
You have an exception in your code (even in unobvious places),
You mistype a transition (no exception, just hangs),
A user's browser doesn't fire the transitionEnd event properly for some reason (This was repeatable for one user's up-to-date Chrome browser.
There is a failure mode in the Interaction between page transitions and Loader (depending on timing, couldn't repeat),
Multiple other causes
Note that there is a comment in Kendo that says: "This should be cleaned up at some point (widget by widget), and refactored to widgets not relying on the complete callback if no transition occurs.", so clearly Telerik know there is a problem.
You can use the following code during development to at least warn when Kendo Mobile has crapped itself:
var transitionTimer;
kendo.mobile.ui.Loader.prototype.wasTransition = kendo.mobile.ui.Loader.prototype.transition;
kendo.mobile.ui.Loader.prototype.transition = function() {
transitionTimer = setTimeout(function() {
alert('Kendo has hung the page');
}, 10000);
this.wasTransition.apply(this, arguments);
}
kendo.mobile.ui.Loader.prototype.wasTransitionDone = kendo.mobile.ui.Loader.prototype.transitionDone;
kendo.mobile.ui.Loader.prototype.transitionDone = function() {
clearTimeout(transitionTimer);
this.wasTransitionDone.apply(this, arguments);
}