Blur event not works for div - javascript

Here is my code below I'm trying to hide addstuff id div when clicked out of it. I tried body click event but it was useless. So I need a trigger event like blur. But It doesn't work for both blur and focusout events.
$(document).ready(function() {
$('#addstuff').blur(function () { $('#addstuff').fadeOut() })
})

There is no blur event for div. You can create that effect using the click event of body.Note that you should exclude that div from the click event
$(document).ready(function () {
$("body").not("#addstuff").click(function (e) {
$("#addstuff").fadeOut();
});
});
Fiddle
Edit
As #TrueBlueAussie suggested, it would be better to use document instead of 'body' for the click event handler:
$(document).not("#addstuff").click(function (e) {
$("#addstuff").fadeOut();
});

There's no way you can use .blur with a div, it has to be with some input field.
You can always use mouse events like
$(document).ready(function(){
$("#addstuff").mouseleave(function(){
$(this).remove();
});
});
http://jsfiddle.net/asrF2/
You can also use the HTML5 global attribute contenteditable (don't forget to set it true or false)
<div id="#addstuf" contenteditable="true">bla bla</div>
I don't recommend this that much, because of mobile browsers' compatibility.

divs have no focus and blur events, but you can add a contenteditable attribute so that you can type in that div, so the blur actually gets fired:
<div id="addstuff" contenteditable></div>
Then your jquery code works.
You can add additional functions to prevent people from actually typing in that div.
Alternatively you can use the .mouseleave() or .mouseout() event.

div element cannot be focused on so the blur function of jquery cannot be applied to it. See existing answers from our Stack Exchange buddies below for elements that focus can be applied on.
Which HTML elements can receive focus?

Related

How to prevent an element from losing focus?

How to keep the Focus on one textbox ? even if you click anywhere in a browser.
$("#txtSearch").focus();
You need to subscribe to the blur event of the textbox and reinstate focus with a small timeout:
$('#txtSearch').blur(function (event) {
setTimeout(function () { $("#txtSearch").focus(); }, 20);
});
This way you don't rely on subscribing to the events of any other element on the page. If you subscribe to body click or html click, it won't run if any other element prevents propagation of its click event, also it won't work when tabbing out of the textbox.
Example:
<!-- I will not propagate my click to top level DOM elements -->
<button id="button">Click me</button>
<script>
$('#button').click(function (event) {
event.stopPropagation();
});
</script>
Konstantin Dinev answer works ok in most cases, but if you dont want to lose the focus only when clicking on certain parts of the html just do this:
$(".nofocus").on( "mousedown", function (e) {
return false;
});
In my case i'm doing a small html text editor and i dont want to lose the control when pressing an action button, but yes in any other case.
I just need to add the nofocus class to the button and it will not take the control
$("html").click(function(){
$("#txtSearch").focus();
});
Live Demo: http://jsfiddle.net/QhaLY/
It's also possible without jQuery and without re-focusing, if you just need a click on specific elements to not grab the focus
just listen for the mousedown event and cancel it
element.addEventListener("mousedown", event => {event.preventDefault(); event.stopPropagation()});
$('body').click(function(){$("#txtSearch").focus();});
There are other ways of loosing focus than clicking area away from the input i.e. tabbing. If you want to prevent loosing focus use blur event i.e.
document.getElementById('txtSearch').addEventListener('blur', e => {
e.target.focus();
});
I use onMouseDown={e => e.preventDefault()} and that works just fine.

JavaScript: capturing events regardless of element

Is there any existing mechanism by which I can add an event listener to 'focus' for all the DOM elements on the page that have this event? If not, how might I do that?
I'd like to console.log(something) any time any DOM element fires an event. How might I do this?
EDIT: Without any framework please :)
You can bind the event to the body or html element. Or any other element which encloses all of your html.
Or if you want to use jQuery you could do something like
$("*").bind("focus", function(e){
console.log("something");
})
Events "bubble" up through the DOM, so you should be able to bind a listener to document, body, html, or any other parent element (e.g. a div) and listen for every event triggered by elements that it contains.
For example, using JQuery, you could do it like this:
$(document).bind('focus', function(e) { console.log(e); });
This will log every focus event, no matter what element initially triggers the event.
You could try using the :input pseudo selector in jQuery.
$(':input').focus(function(e){
console.log(e);
});
This will only attach to the input elements which is probably what you're looking for anyway.
Something like this should work (with jQuery).
$("input").focus(function(){
console.log($(this).attr("id"));
});
Here's a live example:
http://jsbin.com/ipiciz/edit#javascript,html,live

JS jQuery Hiding element on unfocus stops other events from being fired

I have a search suggestion box that I hide when the search text box loses focus. This works great, except that when I click one of the suggestions the click event for that suggestion does not fire.
searchText.focusout(function () { $("#search-suggestions").hide(); });
I also tried:
searchText.focusout(function () { $("#search-suggestions").css("visibility", "hidden"); });
I tried commenting out the hide on unfocus code and the click events then worked fine.
(Basically, the blur event happens before the click on the suggestion can be registered, such that the element I attempted to click is not on the screen when the clicm does register)
here's the click event code:
//Called after the ajax load
$("#search-suggestions").find("a").click(function () { alert("hi"); })
I also tried rendering this on the server but it failed as well:
Search Suggestion
If any one has any suggestions I would appreciate it. Thanks!
You could try to define something like this:
//this goes where you first binding focusout handler
searchText.focusout(onFocusOut);
//this is a usual function
function onFocusOut() {
$("#search-suggestions").hide();
}
//this could be defined after you draw the search-suggestions control
$("#search-suggestions").hover(function() {
//this is hover in handler; unbind focusout from searchText
//something like that:
$("#searchText").unbind('focusout', onFocusOut)
}, function() {
//this is hover out handler; bind focusout to searchText
//something like that:
$("#searchText").bind('focusout', onFocusOut)
});
you could also use live (http://api.jquery.com/live/) to define hover handler for #search-suggestions, depending on what exactly you need.
This will make your search suggestions stay visible when clicking them. In click handler you can then hide them.
Try just making it invisible.
Change $('#my_search_box').hide(); to $('#my_search_box').css('visibility','hidden');
If you have surrounding DOM elements that need to act as if the search box is gone, you can just assign it an absolute position as well.
Try using .css('visibility', 'hidden') instead of .hide which uses display:none.

jquery offclick?

I have a 'li' that pops down when I click on a 'link' via jquery's 'click'.
Does anyone know of a clean way to do something along the lines of 'offclick'? As in, when I click off of the element, it would hide the pop down?
Thanks!
Matt
You would want to assign a click listener to the window and also assign the click listener to your link. Inside the link click listener, you'll want to stop the event propagation so it doesn't travel up the DOM tree and fire your window's click listener.
Something like this should do the trick:
$(window).click(function(){
$('li#my_li').slideUp();
});
$('a#my_link').click(function(event){
try
{
event.stopPropagation();
}
catch(err)
{
// IE does it this way
window.event.cancelBubble=true;
}
$('li#my_li').slideDown();
});
I guess you could look at blur, which is called when the element looses focus:
ref: http://api.jquery.com/blur/
You can use blur or focusout depending on your needs

Is it possible to have jQuery.click trigger on the top element only?

I'm trying to make a site where the user can click on any element to edit it's CSS. I use the following to add the click function to all <li>, <div> and <ul>.
$('li,div,ul').click(function () {
alert(this.id);
});
The problem is if I click on a <li> element, then I get the alert for that and any element underneath it. (all the containers).
Is it possible to have only the top element trigger when clicked?
You want to stop event propagation, you do this in jQuery by calling the stopPropagation method on the event object.
$('li,div,ul').click(function (e) {
e.stopPropagation();
alert(this.id);
});
I believe you'd want to use stopPropagation(); inside the click function.
It sounds to me like you're looking for .stopPropagation(). Calling stopPropagation will prevent the event from "bubbling" up to parent containers.

Categories