We Keep Coding

Lost click event on any link due to handling touchstart and touchend events - jQuery

Hi I am using touchstart and touchend to detect scroll on mobile browser.
//Detect Scroll on Mobile//
var ts;
$(document).bind('touchstart', function (e){
ts = e.originalEvent.touches[0].clientY;
});
$(document).bind('touchend', function (e){
//e.preventDefault();
var te = e.originalEvent.changedTouches[0].clientY;
if(ts > te+5){
next_slide();
}else if(ts < te-5){
e.preventDefault();
prev_slide();
}
});
The scroll is working perfectly but none of the links are working when I click them. I believe, this is because, I am capturing touchstart event and it may not be firing click event.
Not sure how to keep my scroll function as is without affecting other links.
By the way, it is working perfectly when I inspect it on desktop chrome. Maybe due to mouseclick event.

Button background color on touch event is not the same as on the click event

I am trying to make button change color back to red after each click (desktop devices) or touch event (smart phones).
Here working example from codepen
Code:
$(
function(){
$("#btnAdd").mouseenter(function () {
jQuery("#btnAdd").css("background-color", "black");
}).mouseleave(function () {
jQuery("#btnAdd").css("background-color", "#d80000");
});
}
);
It works fine for the click event. But, it doesnt' work for the touch event. Color stays black. How can I simulate 'mouseleave' event on the phone? It seems that only 'mouseenter' event is triggered, because color is changed to black and it stays black, until some other element is clicked.
I've also tried mousedown and mouseup events, but end result was similiar. On a desktop all fine, on smartphone color stayed black.

You can add both mousedown and touchstart events in your code using the on() method.
$(function() {
$("#btnAdd").on('mousedown touchstart', function () {
jQuery("#btnAdd").css("background-color", "black");
}).on('mouseup touchend', function() {
jQuery("#btnAdd").css("background-color", "red");
});
});
Here's the working example: http://codepen.io/anon/pen/JKxEBJ
Aside, why don't you use CSS :active to achieve this effect?

Please try it with onclick instead.
You can try using $("button").click(function() {});

You can use the touch events for smart phones.
$("#btnAdd").bind('touchstart ', function(){
jQuery("#btnAdd").css("background-color", "black");
});
Here is the jsFiddle link
And FYI, there are several events to detect the touch in smart phones, especially for IOS.
TouchStart
TouchMove
TouchEnd
TouchCancel
Hope it helps you :)

Stopping bubbling event in Firefox

I'm trying to handle touch/mouse events. So, I created this code:
myObject.addEventListener("touchstart", function(e){
e.stopPropagation();
e.preventDefault();
console.log("Touched");
mouseTouchDown(e);
});
myObject.addEventListener("mousedown", function(e){
console.log("Clicked");
mouseTouchDown(e);
});
function mouseTouchDown(e){
console.log("Some function.");};
I want to stop bubbling of touch event, so click won't be fired afterwards. It works on Chrome, but on Firefox I get in console:
Touched
Clicked
How can I stop mouse click firing after touch event?
I tried returning false, but it doesn't work.

This looks like a bug in the browser, your code looks fine.
See: https://bugzilla.mozilla.org/show_bug.cgi?id=977226.
What OS/version of Firefox are you testing this with?

Have u attached both events with same element?
If that is the case the error is not because of bubbling happening.while mouse click several events will happen like mousedown, touchstart ..etc.so if you want to avoid mouse click event occuring add preventDefault() in the mouse down.This will disable default mouse click event happening on that element.

touchend event in ios webkit not firing?

I'm trying to implement a menu for a ios webkit based app in which the user touches/clicks and holds a menu button ('.menu_item'), after 500ms the sub menu opens (div.slide_up_sub_menu), and a user should be able to slide their finger/mouse up to a submenu li item and release.
<li class="menu_item">
ASSET MANAGEMENT
<div class="slide_up_sub_menu hidden_menu">
<ul class="submenu">
<li>Unified Naming Convention</li>
<li>Version Control</li>
</ul>
</div>
</li>
The application should then be able to detect which submenu item the touchend/mouseup event happened on. I'm binding a touchstart event to the menu item, waiting for 500ms, and afterwards telling the submenu to show. When a user releases their finger a touchend event should fire closing the submenu. If the user has stopped their touch on a submenu item it should be detected. Currently detection of which submenu item a mouseup event happened on works in Safari on the desktop:
$('ul.submenu li').live('mouseup', function(e){
console.log($(e.currentTarget)); //works on the desktop
});
but if I do the same using a touchend handler it doesn't work on an ipad:
$('ul.submenu li').live('touchend', function(e){
console.log($(e.currentTarget)); //never fires
});
if I look for every touchend event I can get a reference to the parent sub menu item when I end the touch on a submenu item:
$(document.body).bind('touchend', function(e) {
console.log($(e.target).html()); //logs ASSET MANAGEMENT
});
but no reference to the submenu item.
Does anyone have any idea why a touchend event is not being fired on the submenu items?
Thanks

touchend does not fire because touchcancel has fired earlier. If you want full touch evens handling you need to call
e.preventDefault()
in the callback of "touchmove" event, otherwise when a touchmove event occurs if the browser decides that this is a scroll event it will fire touchcancel and never fire touchend.

Maybe it's a bit late to answer.
This event will never fire, because touch events fire on the very element on which touchstart happened. So, to do what you want to, one solution is to use document.elementFromPoint method, to which you will send appropriate x and y coordinates.

If you don't need to use multitouch data, you may keep using mouseup on ipad.
further reading:
http://developer.apple.com/library/IOS/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

For your "touchmove" event;
If you do not want to do anything on touchmove:
return false;
If you with to prevent the default behavior but execute some code on touchmove:
e.preventDefault();
This issue is more pronounced on iPads.

iPad hover event process

I am developing a site for Apple iPad. In this, how can I apply shadow on mouseover and how to remove on mouseout? Like HTML a process, or any other way available with Javascript, I am using jQuery here.. any advice?

You can try to bind click or touchstart-touchend events. Like so:
//ipad and iphone fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".menu li a").bind('touchstart', function(){
console.log("touch started");
});
$(".menu li a").bind('touchend', function(){
console.log("touch ended");
});
}

Since there's no mouse and no pointer that moves around the screen (except from some jailbreaked iPads, but that's another story), these events are never fired by iPad's Safari.
You can bind the effects to other events (like mouse click) but maybe it's not necessary...

Switch to applying hover effects/shadow on mousedown and mousemove, and use some other event (a timed mousedown/mouseup), or a completely different button or touch location, for "clicking".
Note that some effects may never even be seen if they are hidden under the touch.