jQuery 模糊事件在 Chrome 中触发了两次

Posted 2023-02-22

【中文标题】jQuery 模糊事件在 Chrome 中触发了两次

【英文标题】：jQuery blur event fired twice in Chrome

【发布时间】：2012-06-25 12:59:34

【问题描述】：

我创建了一个带有输入字段的简单“无限”表单。 每次聚焦一个空输入时，它都会创建一个新输入，并且在空输入字段模糊时，该字段会被删除。

见example here

我使用以下代码来实现这一切：

var $input = $('<div/>').html( $('<input/>').addClass('value') );
$('form').append( $input.clone() );

$('form').on( 'focus', 'input.value', function(e) 

    // Add new input if the focused one is empty
    if(!$.trim(this.value).length) 
        $('form').append( $input.clone() );
    


).on( 'blur', 'input.value', function(e) 
    var $this = $(this);

    if( !$.trim(this.value).length ) 
        console.log('REMOVING INPUT');
        $this.parent().remove();
     else 
        $this.attr('name', 'item-'+$this.val());
    

);

但问题是，在 Chrome 中，当我切换到另一个应用程序（⌘tab）时，blur 事件会触发两次。这会产生错误，因为无法删除节点，因为它已经消失了：

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 

Firefox 似乎工作正常。

那么为什么blur 事件会被触发两次，我该如何防止这种情况发生呢？

编辑 - 在this question 中尝试了答案，但没有运气。在 Chrome 中仍然收到错误消息，我做错了什么？

See updated fiddle

有没有办法检查元素是否仍然存在？因为第二次blur 触发该节点被删除。 $(this).length 仍然不为零。

【问题讨论】：

与***.com/questions/9649966/…重复

是的，我知道这看起来很熟悉 :-)

谢谢，笨我，搜索 jQuery :( 现在试试

更新了问题，另一个问题中提出的解决方案似乎不起作用，或者我在这里做错了什么......jsfiddle.net/EPxkh/3

看起来错误正在发生，因为即使使用 isTargetWindow 修复，事件也会以错误的顺序触发 - 如果您查看 javascript 控制台，您会看到您得到了两个“窗口模糊”之前的“删除输入”行。我不确定如何解决这个问题，但可能是一个值得关注的方向！

【参考方案1】：

请检查此小提琴是否具有您需要的行为， http://jsfiddle.net/EPxkh/8/

http://www.quirksmode.org/js/introevents.html

http://www.quirksmode.org/js/events_order.html

http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

【讨论】：

感谢您的努力！不幸的是，我仍然在 Chrome 中得到NOT_FOUND_ERR: DOM Exception 8？

【参考方案2】：

这看起来像是 Blink 中的一个错误，在 Chromium 项目的页面上有一个错误报告： http://code.google.com/p/chromium/issues/detail?id=253253