I have where I use an onfocus event handler to do several things. It works great after initial page load. However, after I click on a link that opens a modal popup the onfocus event stops working. Focus still works fine... but the onfocus event is never fired again until the page is reloaded. How can focus happen without the onfocus event firing?
jQuery(":input").on("focus", function(e)
{
console.log("Debug 1");
});
Before the modal popup this call fires the event handler above...
pTR.find("td:eq(13)").children(":first").focus();
After closing the popup that same call does give that element focus, but the event handler isnt fired.
How is this possible?
I didn't understand very well the question, but I think putting
e.preventDefault();
or
e.stopPropagation();
at the beginning of your onfocus event might help...
Try both depending of your situation.
Related
I have an event listener on page 1
window.addEventListener("keydown")
It's causing me issues where another event listener "keydown" in a dialog on that page 1 is conflicting with the window event listener.
There are two event listeners:
dialog event listener
Page event listener
When I add text to the dialog, the page picks up that keydown. I don't want that. I can't add stopPropagation to the page then the dialog won't get the backspace.
What should I do? Can I replace the window. part to something more specific?
In your event handler for the text input, call event.stopPropagation() to prevent the event from being propagated further to other listeners.
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
I have a text input on a page to which I have bound focus() and blur() events. I'm having an issue where focus and then blur are firing unexpectedly if I follow the these steps:
Click on input, focus() fires. OK.
Click out of window on another window, blur() fires. OK.
Click back on original window, focus() and then blur() on the input both fire. PROBLEM!
$('#password').focus(function(){
$('#passwordStrength').slideDown(500);
}).blur(function(){
$('#passwordStrength').slideUp(500);
});
I really need the focus() and blur() events not to fire when the window regains focus as it causes a div to quickly appear and then disappear.
Any ideas on how to stop this?
I ended up getting around this by checking if the document has focus as part of my blur function.
$('#password').focus(function(){
$('#passwordStrength').slideDown(500);
}).blur(function(){
if (document.hasFocus()) {
$('#passwordStrength').slideUp(500);
}
});
This means that my strength box stays on the page when clicking away and then behaves appropriately when clicking back into the window.
Thanks to the commenters for trying to help and sending me on the right path.
You can use window.onfocus to detect if the current tab is focused.
function focus () {
$('#password').focus(function(){
$('#passwordStrength').slideDown(500);
}).blur(function(){
$('#passwordStrength').slideUp(500);
});
}
focus();
window.onfocus = function () {
$('#password').focus();
focus();
}
Here the fiddle
I have a bootstrap popover that becomes active on focus of an input. The popover contains a button in it to perform an ajax request.
I have a blur function that closes the popover if the user clicks away from the input:
$(document).on('blur','.open-popover',function(){
$(".popover").attr("style","");
//and do other things too
});
I am trying to prevent the blur function above from running if the user presses the button in the popover:
$(document).on('click','button',function(){
//prevent the blur actions and
//do ajax stuff
});
Have you looked at stopImmediatePropagation? If using jQuery, then event handlers are fired in the order that they are bound. Just bind the click before the blur, and run stopImmediatePropagation within the click event.
// bind click event first
$(document).on('click','button',function(event){
// keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.
event.stopImmediatePropagation();
});
// then attach blur
$(document).on('blur','.open-popover',function(){
$(".popover").attr("style","");
//and do other things too
});
Having this sample code:
<input type="text" id="changeid">
click
<script>
$('#clickb').on("click", function(event){
alert(1);
return false;
});
$('#changeid').on("change", function(event){
alert(2);
return false;
});
</script>
When putting something into the text field and click the link immediately, only onchange event fires, but not link click event.
Why is that?
It seems that the change event is blocking the click event?
It is blocked by alert. Change alert to console.log you will find two events all fired.
The demo.
$('#clickb').on("click", function(event){
console.log(1);
return false;
});
$('#changeid').on("change", function(event){
console.log(2);
return false;
});
When you edit the input and then click on the link the following happens on the inside
You start clicking on the 'link'. No events are generated yet (not even mousedown), because first the browser will do some cleanup work:
The input loses focus and will raise a blur event
The input raises a change event, since it raised a blur and the value changed
Your change event callback opens an alert(2)
The documents loses focus since a new window appeared
The link will never experience the click.
The solution is not to use alert (as xdazz proposed).
use this
$("#changeid").live('change', function () ...
onchange event fires only after the element is blurred. So when u type some text and click on the link first the element is blurred on the text field. The best way to handle the change event on having onkeyup event to track the changes made on the text field.
for arcane reasons I need to be able to cancel the click event via the mousedown event.
Briefly; I am creating a context menu in the mousedown event, however, when the user clicks on the page the context menu should disappear.
I am not able to use the mousedown event over the click in that scenario as I want the user to be able to click links inside the menu ( a full click would never travel to the <a> based menu elements ).
If it is any help, jQuery can be applied.
I would like to either be able to prevent the click event from happening from within the initial mousedown, or be able to pass information to the click event (via originalEvent or otherwise).
TIA
Seems to be impossible, neither FF nor Opera didnt cancel upcoming click when prevented in mousedown and/or mouseup (as side note: click is dispatched after mouseup if certain conditions met). testcase: http://jsfiddle.net/ksaeU/
I have just had the exact same problem. I fixed my context menu by closing it on mousedown and eating the mousedown event on the menu so that I can still receive clicks on the menu, like so:
$(document).one('mousedown.ct', null, function() { cmenu.hide(); return false; });
cmenu.bind('mousedown', function(e) { e.stopImmediatePropagation(); });
And in the hide() function I unbind the mousedown.ct again, in case it was closed due to a click on an item.
Hey, I think this is what you are trying to do with your code. If not, I apologize, I may have misunderstood the question. I used jQuery to get it done: http://jsfiddle.net/jackrugile/KArRD/
$('a').bind({
mousedown: function(){
// Do stuff
},
click: function(e){
e.preventDefault();
}
});