I am working with AngularJS calendar (Which is essentially jQuery Full Calendar by Adam Shaw wrapped for angular). Here, the calendar event-item clicks worked both in ipad and desktop fine, until I brought in fastclick.js by ft labs (https://github.com/ftlabs/fastclick). Now, calendar event-item clicks works only on desktop, but not working at all on the ipad!
However, other ng-clicks work fine with fastclick both on desktop and iPad.
I understand how fastclick.js works by simply adding touch-end event listeners and calling click events within them, and cannot understand why this would fail with calendar event-item clicks.
Note: I tried using ngTouch instead of fastclick, but their, the ng-click doesn't become fast. According to google, ngTouch's ng-click cannot be used with jQuery
if all else fails you can inspect which events are linked to your elements with visual event: http://www.sprymedia.co.uk/article/visual+event
This adds an overlayer to any web page and let you visually inspect the JS code that's linked to an element (it shows you the piece of code in a pop up).
this way you can easily see if everything is set up correctly.
PS: I have no link to this tool or it's makers.
I had similar issue. fastclickjs blocks every jQuery .click() . But if you dispatch event without jQuery everything works fine.
Well this is an old question, but maybe it helps somebody.
I had a similar problem, and even fastclick.js didn't help and wasn't fast enough on the iPad.
The problem is that on a normal browser click event (on an iPad) has a delay of 300ms on touchstart and again 300ms on touchend.
fastclick.js also had some conflicts like yours with the calendar.
So i just wrote an own directive and called it ng-mobile-click.
Directive ngMobileClick:
App.directive("ngMobileClick", [function () {
return function (scope, elem, attrs) {
elem.bind("touchstart click", function (e) {
e.preventDefault();
e.stopPropagation();
scope.$apply( attrs["ngMobileClick"] );
});
}
}]);
Usage in templates:
<input type="button" value="somevalue" ng-mobile-click="someFunction(someParam)"/>
Advantage:
Will never conflict with standard click events.
Disadvantage
You have to refactor your code where you need it
Related
Here's something odd, that I felt sure was working in earlier mobile browsers: In Chrome on Android, and Safari on iOS, it seems the touchstart event is fired after the click event, not before. When did this change?
A simple example:
jQuery(function($) {
var touched = false;
$('#clicky').on('touchstart', function(evt){
touched = true;
evt.preventDefault();
})
.click(function(){
if (!touched) {
alert("somehow touch didn't fire")
}
});
})
Run this fiddle, and you'll see the alert can pop up on Android and iOS, when it should actually never show!
http://jsfiddle.net/quxnxu7d/2/
I ran it through Chrome on Android and it worked as you expected for me. I added an alert to the touchstart handler and it fired to be sure that it was firing first and it did.
Take a look at the touch events mdn article. The article specifically mentions:
calling preventDefault() on a touchstart or the first touchmove event of a series prevents the corresponding mouse events from firing
Click is a mouse event so it "should" work as you expect (and it was working for me). I'd verify that the events are indeed running out of order (use console.log() instead of alert()) on your target browsers. If they are, which is perfectly possible with less than perfect browsers/specs, try using a different mouse event like mouseup. My guess is that you'll be able to find an event that works consistently.
Good luck!
Have you tried using mousedown instead of click? That way you should get different events for touch and click without any double firing. You will also likely need to use keydown to keep this site accessible.
There is a 300ms delay between a physical tap and the firing of a click event on some mobile browsers (e.g. iOS Safari)
I ran into the same issue and FastClick jQuery plugin fixed it for me
Have a look FastClick
I have made a simple carousal using an online script called "simplyScroll".
here is the link to the script:
http://logicbox.net/jquery/simplyscroll/#config
My Problem:
here is the link the page:
http://namdarshirazian.com/exhibition.php
Generally in desktop mode, when I click on each image, it runs a javascript and shows a popup. This javascript is written by myself. Simply a simple action of hide and show.
But when viewed with smartphone (android/firefox), it does not triggers click event. VERY STRANGE. Can anyone please help my why this does not work?
The click action is as simple as :
$("body").on("click", "element", function(){
});
You can experiment with touchup and touchdown events instead. It's actually a right mess caused by people worrying about touches being long. The fastclick library might smooth things out a bit.
i had the same problem when i did my website responsive for any device resolution, the solution is simple, you write your jQuery as standard but u have to include a script that will allow the jQuery to work on touch devices.
add this script into your website and check the magic result:
http://touchpunch.furf.com/
I've got a simple click handler that does something on the screen instead of visiting that link. Here's the code (I'm cutting out the nonsense but the important stuff is accurate):
Link Text
<script type="text/javascript" src="./path/to/jquery.js"></script>
<script type="text/javascript">
$('#others').on('click', function(ev){
ev.preventDefault();
ev.stopPropagation();
// Doing stuff (some simple DOM manipulation)
return false;
});
</script>
This works fine on proper browsers. It works fine on Android (both older webkit and newer Chrome builds) and it works fine on iOS on the iPad 2... But one of my users is using an iPhone 4 and that's where all the fun starts.
When they click the link, the link loads. Despite three separate triggers not to, the event is still firing. Other javascript is working on the page and as I say, this is working everywhere else. Actually to confuse things a little more, the event is suppressed very, very occasionally. Less than 1% of the time.
So is this a known issue with iPhones? Is there a better way of doing all this?
The javascript is loaded at the end of the body (still inside it, but after all the DOM elements it mentions). jQuery version is 1.10.1
try using href="javascript:void();"
Link Text
$('#others').on('click', function(ev){
//ev.preventDefault();
//ev.stopPropagation();
// Doing stuff (some simple DOM manipulation)
return false;
});
The dropdown opens and closes fine but the click event / or touch event isn't being fired. I put together a tiny test case demo but its just as easy to run the twitter bootsrap docs. I have tried this on Android and iOS devices.
I was hoping to rectify by including an Events library like, jQueryMobile or Hammer.js but I'm not sure if this will help as Twitter Bootstap (I think) includes its own touch handlers.
Anyone else come across the problem?
As a work around to this problem I used the Jquery Mobile touch events and listened for tapevents on the dropdown. Here is a simple implementation:
$(".dropdown-menu").on("tap", "li a", function(e, ui){
e.preventDefault();
if ($(this).attr("data-toggle") === "modal")
{
$($(this).attr('href')).modal("show");
}
return false;
})
Seems to be a known issue that's resolved in bootstrap 2.1.2 - https://github.com/twitter/bootstrap/pull/5054.
Edit: tried to apply the changes in the ticket about, but couldn't get it to work either.
#CrimsonChin - can you pls elaborate on your implementation. I tried your code, but using JQM with bootstrap I get all kinds of weird behaviors.
It seems as javascript:
$(function() {
setInterval( "slideSwitch()", 5000);
})
never fires while scrolling on the iPad/safari. Is there any workaround for this?
(on android stock browser ok)
It is not so easy as it seems. When I was need functionality like that, I began to use the iScroll library with small changes in the source.
I've used it with the CSS provided in the "ios-perfect-scrollbar" example, and onScrollMove event. But to fire this event even on "momentum scrolling", you'll need to add
if (that.options.onScrollMove) that.options.onScrollMove.call(that, e);
at the end of "animate" function.