javascript - Does the "blur" event fire only for HTML form objects? - Stack Overflow

admin管理员组

文章数量:1318580

I'm working on an interactive web application, currently set up on (user: [email protected], password: demo). It allows you to drag items containing images and/or text from the left sidebar onto the workspace on the right and resize/edit them, among other things.

I've set up an onblur event handler to fire (in theory at least) when a newly created object looses focus, and for testing purposes, that handler simply makes an alert() call. The problem is that the handler doesn't get triggered at all. Bellow is a piece of the code used in creating those new objects:

obj.id = 'mesh-obj-'+current_object_id;
jqObject
    .attr('id',obj.id)
    .attr('item_no', current_object_id)
    .removeClass('dragged transparent tpl-obj no-user-select')
    .addClass('mesh-obj')
    .css({
        'z-index' : current_z_index,
        'left' : obj.position.left - mesh.position.left - mesh.borderWidth,
        'top' : obj.position.top - mesh.position.top - mesh.borderWidth,
        'right' : 'auto'
    })
    .on("focusout blur", function(event){
        alert('object lost focus'); 
    })
    .appendTo('#mesh');

Does the blur event only trigger for form inputs, or any HTML tag at all? If the latter, then what is that I'm doing wrong?

I'm working on an interactive web application, currently set up on http://picselbocs./projects/goalcandy (user: [email protected], password: demo). It allows you to drag items containing images and/or text from the left sidebar onto the workspace on the right and resize/edit them, among other things.

I've set up an onblur event handler to fire (in theory at least) when a newly created object looses focus, and for testing purposes, that handler simply makes an alert() call. The problem is that the handler doesn't get triggered at all. Bellow is a piece of the code used in creating those new objects:

obj.id = 'mesh-obj-'+current_object_id;
jqObject
    .attr('id',obj.id)
    .attr('item_no', current_object_id)
    .removeClass('dragged transparent tpl-obj no-user-select')
    .addClass('mesh-obj')
    .css({
        'z-index' : current_z_index,
        'left' : obj.position.left - mesh.position.left - mesh.borderWidth,
        'top' : obj.position.top - mesh.position.top - mesh.borderWidth,
        'right' : 'auto'
    })
    .on("focusout blur", function(event){
        alert('object lost focus'); 
    })
    .appendTo('#mesh');

Does the blur event only trigger for form inputs, or any HTML tag at all? If the latter, then what is that I'm doing wrong?

• javascript
• jquery
• events
• onblur

Share Improve this question Follow edited Nov 9, 2015 at 12:31 Anders 8,5881010 gold badges5959 silver badges9999 bronze badges asked May 9, 2012 at 8:09 Andrei OnigaAndrei Oniga 8,5591717 gold badges5454 silver badges9191 bronze badges 3

• From jQuery doc: The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <input>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard mands, such as the Tab key, or by mouse clicks elsewhere on the page. – arma Commented May 9, 2012 at 8:13
• Could it be that the blur handler isn't being attached? Do you need to put a ma between focusout, blur? – Jamie Dixon Commented May 9, 2012 at 8:25
• No mas. Just separated by a space. – Andrei Oniga Commented May 9, 2012 at 8:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

you need to assign tabindex to your html elements in order to capture the blur event

html:

<div id="box1" class="box" tabindex="1">div 1</div>
<div id="box2" class="box" tabindex="2">div 2</div>

js:

$('.box').blur(function(){
   console.log(this)
})

Blur event can be used not only on form elements.

Read this article for more information.

本文标签： javascriptDoes the quotblurquot event fire only for HTML form objectsStack Overflow