I'm trying to have an element which support both click and double click on it. But the following example works in IE but does not work in FireFox 3.5.6:
<button onclick="c=setTimeout('alert(1);',1000);" ondblclick="clearTimeout(c);alert(2);">Test</button>
It just doesn't clear timeout, so alert(1) is being fired.
Does anyone know what is the issue?
How I can have click and double click events separately in FireFox?
When you double-click in Firefox, you get two click events and then a dblclick event. So you're setting two timers and clearing one. Clearing the timer on the click event should work:
<button onclick="clearTimeout(c);c=setTimeout('alert(1);',1000);" ondblclick="clearTimeout(c);alert(2);">Test</button>
You really shouldn't be inlining your javascript in your HTML. I would suggest using a JavaScript library like jQuery for this. jQuery will solve the cross browser event issues that you are having!
$(document).ready(function() {
var c;
$("button").click(function() {
c = setTimeout(function() {
alert(1);
}, 1000);
}).dblclick(function() {
clearTimeout(c);
alert(2);
});
});
I don't get it. It still doesn't work. I mean, if you put a clerTimeout in the onclick event the onclick event wont work since you stop it before you have finished it :S
Actually I don't see how you could say "This fixed the issue" ?? Just try and copy that very code you wrote and you'll realise that nothing happends... :/
Related
I've been making some basic mobile navigation and am using a click event to show/hide the menu.
A reduced code sample:
jQuery('.menu-button').click(function(){
jQuery('.header-nav').toggle();
console.log('clicked');
});
I've been remotely debugging on mobile and the console.log always works, but the .header-nav toggle() seems to randomly not trigger - I can't spot a pattern to it, but it always remains in the DOM (which it should), so it being somehow removed is not the reason why it is not firing.
Any ideas?
Thanks to Kevin B's comment it seems that the click event is firing multiple times. To fix this, the following was used:
$(element).off().on('click', function() {
// function body
});
Reference: jQuery click events firing multiple times
First of all, this is my first question here, sorry if it is not asked properly.
I have a bug in a web app we developed in the office. The app is nearly done but In IE < 9 it happens that a text-box which has focus and blur events attached with jQuery raises the blur event as soon as you click on it.
You can see this in this picture (just clicked in the text-box):
https://www.dropbox.com/s/yn10xfrfxsr38bq/screen.PNG
$('#divVolee [type="text"]')
has no focusin or focus events attached.
The URL to the application:
http://86.126.255.70:2213/Anoxa/
If you want you can enter using the "Demarrer" button.
I do not ask anybody to write code for me or anything like that, I just don't know after days of searching in the code and on the net what could cause that.
I tried focusin, focus, focusout, blur, attaching directly or using delegates, the same thing. As soon as I click in the input field it raises the blur / focusout event.
Thank you for your help.
I found it. I started to comment everything out until I found the culprit:
function resizeAccordion() {
var active = $('#divAccordion').accordion('option', 'active');
$('#divAccordion').accordion('destroy').accordion({ heightStyle: "fill", active: active });
}
var resizeId;
$(window).resize(function () {
clearTimeout(resizeId);
resizeId = setTimeout(resizeAccordion, 600);
});
This code was supposed to re-size and re arrange the accordion in the page if the user re-sized the browser. Somehow in IE<9 it got triggered without reason and this caused the blur event to be triggered.
After so many hours. Maybe it is may thinking or code that was wrong, but i still hate IE for it.
I cannot reproduce this bug (using IE8 mode under IE9). But a simple workaround could be: (even quite weird)
$('#divVolee [type="text"]').focus(function(){
//>>code for FOCUS here<<
$(this).blur(blurcallback);
});
function blurcallback()
{
//>>code for BLUR here<<
$(this).off('blur');
}
I have the following code to bind some validation logic to be fired when a user updates the value of a textbox. I expect that the //Do some stuff here code will execute when any of the textboxes it is bound to lose focus.
function RegisterHoursValidationHandlers() {
$('.topic-frame-body input[type=text]').live('change', function () {
//Do some stuff here
});
}
This works exactly as I expect in IE, Firefox and Safari. However, the event never fires in Chrome and I have no idea why.
UPDATE: I was able to get the desired effect by changing 'change' to 'blur'. Though this still doesn't explain why it doesn't worh with 'change'.
There's no known quirk about chrome. (the change event is supported across all browsers)
Example with live showing it working against dynamic content.
Test it here:
There is a piece of information or an assumption being made here that makes this unsolvable.
UPDATE: If it works when you change it to blur, it is possible that you are overwriting the previous event or function. By changing it to blur, whatever is overwriting it no longer will because it is a a different event.
This would also explain why you are not seeing any errors. (keep in mind, I believe that jQuery will chain events bound to the same elements, but live() is a bit of a special case - but that fact might point to it being the function, not the event binding)
Try using .delegate() instead http://api.jquery.com/delegate/
I've tried you code in both FF and Chrome - http://jsfiddle.net/B3aRy/ - It worked in both. So maybe its an issue elsewhere in your code?
What version of Jquery are you using?
I can't see the issue myself, but .live does not support the "change" event until jquery 1.4+
Try:
function RegisterHoursValidationHandlers() {
$(".topic-frame-body input[type='text']").live('change', function () {
//Do some stuff here
});
}
With the quotes around 'text' as I have it. Worth a shot.
Or try:
$(".topic-frame-body input:text").live();
The point being, I think the problem is in the details of how you're targeting the input field, rather than in the method.
basicly i need my page to respond to left and right arrow keys. so trying to have the body tag trigger an event- got it working in chrome etc, will do nothing in firefox- tried googling and after 50 different results still no dice. anyone got any ideas?
heres what i have that works with chrome-
body tag calls this script
$(document).ready(adjust());
------------------the javascript
function adjust(){
$("body").keydown(function(){arrowKey(event.keyCode);});
}
function arrowKey(k){
alert(k);
if (k==37)
alert("Left");
else if (k==39)
alert("Right");
else if (k==32)
alert("space");
}
ive replaced methods with alerts in the function for testing purpose but i need to be able to call different functions based on which arrow is pressed
Actually it works in chrome even without the "event" because event is a keyword in chrome and it is filled with the last triggered event.
The reason it doesn't work in firefox is because you should assign the event like this:
$(document).keydown(function(event){arrowKey(event.keyCode);});
For some reason "body" does not accept the keydown event. Hope it helps.
$("body").keydown(function( ){arrowKey(event.keyCode);});
^
event is missing perhaps
$("body").keydown(function(event){arrowKey(event.keyCode);});
On JSFIDDLE.
Ok Why You don't use JavaScript
window.body.onkeydown=function(evt)
{
arrowKey(evt.keyCode);
}
I hope someone can help me. I know this has been discussed here before but the example is prototype and foreign to me. I'm looking for a strict javascript or jquery solution. I have an example setup here. Click on the scrollbar in FF and you don't get an alert but click on it in IE and you do. Please help me, thanks!
After some searching I came up with this answer. From the best of my knowledge, you cannot actually cancel the blur event, nor can you call the focus event at the same time. This is what I don't get .. you can blur on focus but you cannot focus on blur .. Anyway my solution is use the setTimeout function to call the focus event 1ms after the focus was lost.
var o = this;
oTimeout = setTimeout(function(){
o.focus();
},1);
Using mouseenter and mouseleave events, I set a boolean to refer to on blur event
$("div#box").mouseenter(function(){
changeFocus(1);
}).mouseleave(function(){
changeFocus(0);
});
I've had the same problem and this works for what need it to do. Just force the focus back on the element.
$('#divWithScrollBar').scroll(
function () {
$('#elementThatLosesFocus').focus();
});
That event is somehow triggered after the element is blurred, but before the onblur event is kicked in. Haven't really looked in to it, but that's what seems to be going on.
The scroll does appear a bit slow, but it works.
IE owes me many hours of my life back.