Question

我正在开发一个交互式Web应用程序，目前已在http://picselbocs.com/projects/goalcandy上设置（用户：demo@demo.com，密码：demo）。它允许您将包含图像和/或文本的项目从左侧边栏拖动到右侧的工作区，并调整大小/编辑它们等。

我已经设置了一个onblur事件处理程序，以便在新创建的对象失去焦点时触发（至少在理论上），并且出于测试目的，该处理程序只需进行alert()调用。问题是处理程序根本没有被触发。 Bellow是用于创建这些新对象的代码片段：

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');

模糊事件是否仅触发表单输入或任何HTML标记？如果是后者，那么我做错了什么？

Answer 1

您需要将tabindex指定给html元素才能捕获模糊事件

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)
})

Answer 2

Blur事件不仅可以用于表单元素。

阅读此article以获取更多信息。

“模糊”事件是否仅针对HTML表单对象触发？

2 个答案: