JQuery click method require double click on responsive layout - javascript

click method working fine on desktop but in mobile (or even responsive layout on web) require double click.
Here is the code below
$('body').on('click', '.share-toggle', function(){
console.log('this', this)
return;
});

You can try to trigger the function by click and touch, example:
$(document).on('click touchstart', function () {
Or this:
$(document).on('click touch', function () {
The touchstart event fires as soon as an element is touched, the touch event is more like a "tap", i.e. a single contact on the surface. You should really try each of these to see what works best for you.

You can try with "touchend" event.
$("body").delegate('.share-toggle','click touchend',function(){
console.log('this', this)
return;
}

Related

.addEventListener('click', classToggle) not working on touch devices [duplicate]

I've got a sub-nav that works using jquery - A user clicks on the top level list item, for instance 'services' which triggers the dropdown. The dropdown toggles via clicking the 'service' link. I've made it so a user can click anywhere on the screen to toggle the dropdown to a closed state. But as the site is responsive i want the user to be able to click (touch) anywhere on the screen to close the dropdown but my problem is that it's not working on the touch devices.
My code ive setup for the document click is:
$(document).click(function(event) {
if ( $(".children").is(":visible")) {
$("ul.children").slideUp('slow');
}
});
I'm assuming document.click might not work on touch devices, and if not, what work-around is there to achieve the same effect?
Thanks
Update! In modern browsers, the click event will be fired for a tap, so you don't need to add extra touchstart or touchend events as click should suffice.
This previous answer worked for a time with browsers that thought a tap was special. It originally included a "touch" event that actually was never standardised.
Unless you have a problem with:
$(document).on('click', function () { ... });
There is no need to change anything!
Previous information, updated to remove touch...
To trigger the function with click or touch, you could change this:
$(document).click( function () {
To this:
$(document).on('click touchstart', function () {
The touchstart event fires as soon as an element is touched, so it may be more appropriate to use touchend depending on your circumstances.
touchstart or touchend are not good, because if you scroll the page, the device do stuff.
So, if I want close a window with tap or click outside the element, and scroll the window, I've done:
$(document).on('touchstart', function() {
documentClick = true;
});
$(document).on('touchmove', function() {
documentClick = false;
});
$(document).on('click touchend', function(event) {
if (event.type == "click") documentClick = true;
if (documentClick){
doStuff();
}
});
can you use jqTouch or jquery mobile ? there it's much easier to handle touch events.
If not then you need to simulate click on touch device, follow this articles:
iphone-touch-events-in-javascript
A touch demo
More in this thread
To apply it everywhere, you could do something like
$('body').on('click', function() {
if($('.children').is(':visible')) {
$('ul.children').slideUp('slow');
}
});
As stated above, using 'click touchstart' will get the desired result. If you console.log(e) your clicks though, you may find that when jquery recognizes touch as a click - you will get 2 actions from click and touchstart. The solution bellow worked for me.
//if its a mobile device use 'touchstart'
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
deviceEventType = 'touchstart'
} else {
//If its not a mobile device use 'click'
deviceEventType = 'click'
}
$(document).on(specialEventType, function(e){
//code here
});
the approved answer does not include the essential return false to prevent touchstart from calling click if click is implemented which will result in running the handler twoce.
do:
$(btn).on('click touchstart', e => {
your code ...
return false;
});

dropdown menu not working on mobile, document click not triggered [duplicate]

I've got a sub-nav that works using jquery - A user clicks on the top level list item, for instance 'services' which triggers the dropdown. The dropdown toggles via clicking the 'service' link. I've made it so a user can click anywhere on the screen to toggle the dropdown to a closed state. But as the site is responsive i want the user to be able to click (touch) anywhere on the screen to close the dropdown but my problem is that it's not working on the touch devices.
My code ive setup for the document click is:
$(document).click(function(event) {
if ( $(".children").is(":visible")) {
$("ul.children").slideUp('slow');
}
});
I'm assuming document.click might not work on touch devices, and if not, what work-around is there to achieve the same effect?
Thanks
Update! In modern browsers, the click event will be fired for a tap, so you don't need to add extra touchstart or touchend events as click should suffice.
This previous answer worked for a time with browsers that thought a tap was special. It originally included a "touch" event that actually was never standardised.
Unless you have a problem with:
$(document).on('click', function () { ... });
There is no need to change anything!
Previous information, updated to remove touch...
To trigger the function with click or touch, you could change this:
$(document).click( function () {
To this:
$(document).on('click touchstart', function () {
The touchstart event fires as soon as an element is touched, so it may be more appropriate to use touchend depending on your circumstances.
touchstart or touchend are not good, because if you scroll the page, the device do stuff.
So, if I want close a window with tap or click outside the element, and scroll the window, I've done:
$(document).on('touchstart', function() {
documentClick = true;
});
$(document).on('touchmove', function() {
documentClick = false;
});
$(document).on('click touchend', function(event) {
if (event.type == "click") documentClick = true;
if (documentClick){
doStuff();
}
});
can you use jqTouch or jquery mobile ? there it's much easier to handle touch events.
If not then you need to simulate click on touch device, follow this articles:
iphone-touch-events-in-javascript
A touch demo
More in this thread
To apply it everywhere, you could do something like
$('body').on('click', function() {
if($('.children').is(':visible')) {
$('ul.children').slideUp('slow');
}
});
As stated above, using 'click touchstart' will get the desired result. If you console.log(e) your clicks though, you may find that when jquery recognizes touch as a click - you will get 2 actions from click and touchstart. The solution bellow worked for me.
//if its a mobile device use 'touchstart'
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
deviceEventType = 'touchstart'
} else {
//If its not a mobile device use 'click'
deviceEventType = 'click'
}
$(document).on(specialEventType, function(e){
//code here
});
the approved answer does not include the essential return false to prevent touchstart from calling click if click is implemented which will result in running the handler twoce.
do:
$(btn).on('click touchstart', e => {
your code ...
return false;
});

Display all iphone screen interaction events to the user

My iPhone's screen is playing up. I had the idea, since I'm a web developer, to go to a page on my local machine's web server, or on jsfiddle, using my phone, and have some jquery running on that page which gives me some simple feedback about every touch event. (I have a feeling that I will see lots of spurious swipe events firing off even when i'm not touching the screen, for example).
So, something like this:
<div id="feedback">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
function feedback(msg){
$("#feedback").append("<div class=\"line\">"+msg+"</div");
}
$(function() {
feedback("in $(function) block");
$(document).on("click", function(event){
feedback("clicked at "+event.pageX+","+event.pageY);
});
//can you replace the below with working code?
$(document).on("all events", function(event){
var msg = "Some basic info about this event: if it's a swipe, which direction. if it's a keypress, which character? etc"
feedback(msg);
});
});
</script>
I've set this up in a jsfiddle here: https://jsfiddle.net/sxqjp9xe/
Do I need to write a handler for every event i'm interested in, like I've done with the click handler? Or is there some more generic solution? Thanks, Max
EDIT: changed my "feedback" function to use prepend() instead of append() as it's easier to see once you get a lot of lines on there.
You can include more than one event in the handler:
function feedback(msg){
$("#feedback").append("<div class=\"line\">"+msg+"</div");
}
$(document).on("blur touchstart touchmove touchend touchcancel focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error", function(event) {
var msg = event.type
feedback(msg);
}
https://jsfiddle.net/e9e0ehyc/

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 :)

Question on $(document).bind()

I have a page on iPad.
How do I get the specific element that was touched instead of the generic container element?
$(document).bind("touchstart",function(e){
console.log("touchstart on target : " + e.target.id);
}
Try using delegate instead
$(function() {
$(document).delegate('div', 'click', function(event) {
alert($(this).attr('id'));
// To prevent Propagation
event.stopPropagation()
});
});
in action: http://jsfiddle.net/xem65/
(Using click since I don't have any touch devices nearby atm)
Docs on delegate: http://api.jquery.com/delegate/
That seems like it should be working. Here is a small test case that logs out the event based off of http://gregmurray.org/ipad/touch-events.html, and it seems to recognize the touchstart happening on the div. Maybe you could post an example where it is failing?

Categories