on "tap, click" event firing twice. how to avoid it? - javascript

I'm trying to make an image with area tags where I can click on each area and show an alert.
With both "tap & click" included, I can't seem to figure out how to avoid firing the event twice on desktop mode using a mouse click.
$(document).ready(function(e) {
$('img[usemap]').something();
$('area').on('tap click', function() {
alert($(this).attr('alt'));
});
});
I've searched several ways such as separating the events using Boolean, but they didn't really work as I'm really bad at javascript...
Please help me figure this out. Thank you very much!

You can try testing for window.ontouchstart and only binding the relevant event
$(document).ready(function(e) {
$('img[usemap]').something();
function clickArea(){
alert($(this).attr('alt'));
}
if(typeof window.ontouchstart === 'undefined'){
$('area').on('click', clickArea);
} else{
$('area').on('touchstart', clickArea);
}
});

Related

menu hide and toggle strange behavior

$(function(){
$(".OpenTopMenu").click(function (e) {
$("#top_menu").slideToggle("fast");
e.stopPropagation();
});
$(document).click(function() {
$("#top_menu").hide();
});
$(document).on("touchend", function (event) {
if (!$(event.target).closest("#top_menu").length) {
$("#top_menu").hide();
}
});
});
Hi all, i ran into a strange problem with toggle and hide.
As you can see in my code. If i touch the menu button (.OpenTopMenu) the menu (#top_menu) toggle.
And here its the problem. If #top_menu is visible so when i touch on .OpenTopMenu, #top_menu will hide then toggle to visible again. So i can't really hide #top_menu on touching the menu button (.OpenTopMenu).
Can someone help me with this?
Thanks
Your touchend and click are basically doing the same thing. For mobile uses it's always good to know that a "click" can actually be seen as two events that rapidly follow each other, namely the "mousedown" and "mouseup" event, the last one triggering the "click". On mobile devices, the "click" is triggered at the same time as your "touchend". Now there's also an event called "touchstart" which is triggered when a user put's his / her finger on the glass.
You are right now wondering what all this has to do with your question. Well, it has to do with your document click..
Personally I would solve your problem in the following way;
var userClick = function(){
//you will need something that determines whether your user is
//using a mobile device or not.
return (Browser.isMobile)? "touchend" : "click";
};
var menu = {
isOnMenu:false,
isOnMenu_reset:null,
attachEvents:function(){
$('#top_menu').on('mouseenter',function(){
menu.isOnMenu = true;
}).on('mouseleave',function(){
menu.isOnMenu = false;
}).on('touchstart',function(){
clearTimeout(menu.isOnMenu_reset);
menu.isOnMenu = true;
}).on('touchend',function(){
menu.isOnMenu_reset = setTimeout(function(){
menu.isOnMenu = false;
},30);
});
$('.OpenTopMenu').on(userClick(),function(){
$("#top_menu").slideToggle("fast");
});
$(document).on(userClick(),function(){
if(!menu.isOnMenu){
$('#top_menu').slideToggle("fast");
}
});
},
init:function(){
menu.attachEvents();
}
};
$(function(){
menu.init();
});
Try to change your $(document).click() by somthing like $(".OpenTopMenu").blur(). This might not work with old browsers.
I only wanted click and touched for testing purpose.
But it only have to work with touchend. This is the working code that i finally use. Thanks.
$(document).ready(function(){
$(".OpenTopMenu").click(function(){
$("#top_menu").slideToggle("fast");
});
});
$(document).on("touchend", function(event){
var $trigger = $(".OpenTopMenu");
if($trigger !== event.target && !$trigger.has(event.target).length){
$("#top_menu").slideUp("fast");
}
});
I tried earlier with
!event.target.hasClass('OpenTopMenu') instead of $trigger !== event.target
in the if condition but it doesn't work. Can someone tell me why the upper code work and this one not?

Why .trigger('change') is not working?

Got this piece of code, which works great. However the .trigger('change') is not working.
$(function () {
$('form').each(function () {
var form = $(this);
form.find('.cbox1').change(function () {
if (form.find('.cbox1:checked').length) {
form.find('.cbox2, .cbox3').button("enable");
} else {
form.find('.cbox2, .cbox3')
.prop("checked", false)
.trigger("change")
.button("refresh")
.button("disable", "disable");
}
});
});
});
I know this is probably something simple, but for a noob like me, it's killing me, been reading and studying for days...
Any knowledge/assistance is greatly appreciated,
Si
It works fine. Try adding this line and you'll see that cbox2 change is triggered.
$('form').find(".cbox2").on("change", function() {alert("cbox2 triggered")});
When you are triggering a change, you are triggering it on .cbox2 and .cbox3. However you have not added any listener for the change event on these elements. The listener for change event is attached only to .cbox1. If that is the listener you want to trigger, then call the the trigger("change") on .cbox1 or add event listeners for the other two elements.

jQuery onclick not working on mobile

I'm trying to activate a menu with jQuery with a click (touch) on mobile, but it is not working in mobile. When I do the 'window' resize to try the mobile look, it works with the click, but in an emulator or even trying it with my phone, it doesn't work.
HTML Markup
<img src="i/mobilemenu.jpg" id="mobileMenuButton" style="position:absolute; right:0;"/>
CSS:
#mobileNavigation {display:none}
Javascript Code:
<script type="text/javascript">
$(document).ready(function(){
$('#mobileMenuButton').on('click touchstart',function(){
if ($('#mobileNavigation').css('display') == 'none') {
$('#mobileNavigation').css('display','block');
}
else
{
$('#mobileNavigation').css('display','none'); }
});
});
</script>
Establish a click handler based on the client as such:
var clickHandler = ("ontouchstart" in window ? "touchend" : "click")
and use it whenever you want to listen to click events:
$(".selector").on(clickHandler, function() {...})
This way you can always make sure the proper event is being listened to.
<script type="text/javascript">
$(document).ready(function(){
$('#mobileMenuButton').on('mousedown touchstart',function(){
var userAgent = window.navigator.userAgent;
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)|| userAgent.match(/Android/i)) {
if ($('#mobileNavigation').css('display') == 'none') {
$('#mobileNavigation').css('display','block');
} else {
$('#mobileNavigation').css('display','none');
}
}
});
});
</script>
Just provide the user agent.
I remember when I was building a mobile app, elements that weren't links wouldn't pick up on the click event unless I gave them the CSS property of cursor: pointer. Perhaps this is a similar issue. Try giving the button that property in the style attribute.
Came across this question and realized the click (and touchstart) should work.
#vulcanR, it is not working in your case is because you already have #mobileNavigation as display: none; So, there is no place for the event to be triggered.
Instead, try the following code and it should work-
$(document).ready(function() {
$('#mobileMenuButton').on('click touchstart', function() {
if ($('#mobileNavigation').css('opacity') == '0') {
$('#mobileNavigation').css('opacity','1');
} else {
$('#mobileNavigation').css('opacity','0'); }
});
});
});
The reason behind this working is that opacity:0 retains the height and width of the element whereas display:none makes the dimensions zero, so there is no estate for the event.
You could have also used visibility:hidden, but that doesn't listen to click event or any events in general.

JQuery mobile swipe to change pages

For the life of me I cannot figure out why I'm not able to change pages in my JQuery mobile document when I swipe right. I know the swipe event is written correctly because when I swap it out with and alert("test");that fires correctly.
Heres what I have done :
<script>
$(function() {
$('.table').on('swiperight', function(){
$.mobile.changePage("#home");
});
});
</script>
I've referred to the JQuery mobile documentation and to other posts here on the forum but have not been able to resolve this issue. Any ideas?
Heres a fiddle of the project. http://jsfiddle.net/a6TZW/
You don't need to wrap this event within $function() as such events are triggered once they occur.
Swipe events:
$(document).on('swiperight','.table', function()
{ $.mobile.changePage("#page2");
});
$(document).on('swipeleft','.table', function()
{ $.mobile.changePage("#page1");
});
Also, you can combine them this way:
$(document).on('swiperight swipeleft','.table', function(event) {
if (event.type == 'swiperight') {
$.mobile.changePage("#page2");
}
if (event.type == 'swipeleft') {
$.mobile.changePage("#page1");
}
});
JSfiddle: Test it here

If else statement for javascript click event

I have two statements. What I am trying to do is when someone clicks on #area_a then hide then entire #area_b div without activating the focusout for the #area_b_textbox. But I've tried different code (which I am not including here because it is incorrect and want to get your suggestions) and what is happening is it is activating the focusout everytime I click on the #area_a div.
JQuery base actions
$("#area_a").click(function() { $("#area_b").hide(); });
$("#area_b_textbox").focusout(function() {$("#area_b_error").show();});
HTML:
<div id="area_a"></div>
<div id="area_b">
<input id="area_b_textbox">
<div id="area_b_error"></div>
</div>
Thanks!
You could hack around the problem with a timer. Timers usually smell bad but I think it is your safest bet here. If you try using hover or other mouse events you might run into trouble with keyboard navigation and activation or the lack of "hoverish" events on touch interfaces (and we can't pretend those don't exist anymore).
Something like this:
var timer_kludge = {
start: function(fn) {
this.id = setTimeout(fn, 200);
},
stop: function() {
if(this.id)
clearTimeout(this.id);
this.id = null;
},
id: null
};
$('#area_a').click(function() {
timer_kludge.stop();
$('#out').append('<p>click</p>');
});
$('#area_b_textbox').focusout(function() {
timer_kludge.start(function() {
$('#out').append('<p>textarea focusout</p>');
});
});
$('#area_b_textbox').focusin(function() {
timer_kludge.stop();
});
Demo: http://jsfiddle.net/ambiguous/s8kw8/1/
You'd want to play with the 200 timeout a bit to see what works best in your circumstances.
Why not just add a flag to ignore next focusout (blur?) event.
ignoreNextFocus = false;
$("#area_a").click(function() { ignoreNextFocus=true; $("#area_b").hide(); });
$("#area_b_textbox").focusout(function() { if(!ignoreNextFocus)$("#area_b_error").show();ignoreNextFocus=false;});
On that note setting the flag on click event might be too late. If it is the case, try mousedown event.
this is not possible since you loose the focus automatically when you click somewhere else...
What you need to do is to unbind the focusout event on hover of the #area_a and rebind it later on...
$("#area_a").click(function() {
$("#area_b").hide()
}),hover(
function(){
$("#area_b_textbox").unbind("focusout")
},
function(){
$("#area_b_textbox").focusout(function() {$("#area_b_error").show();});
}
)
PS: what is your ultimate goal here?
I'm not sure this is possible since by definition the focus has to leave the #area_b_textbox if the user is going to click a button.

Categories