Javascript onblur 无法正常工作

Question

我正在尝试创建一个函数，允许编辑 div，并且当不再聚焦时(例如单击元素外部)，它应该执行一个函数。

当用 fiddle 测试这个时，预期的响应不会发生。相反，当单击该元素时，它既使内容可编辑，又同时执行 onblur 功能。

知道为什么会发生这种情况吗？

https://jsfiddle.net/kz29f77z/

<div id="targetdiv">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>


$('#targetdiv').click(function(){
    this.setAttribute('contenteditable', 'true');
    this.onblur(alert());
});

Answer 1

this.onblur(alert()); 调用 alert()，然后将其返回值传递给 onblur，与 foo(bar()) 调用 bar 的方式完全相同，然后将其返回值传递给 foo .

相反，您可以将一个函数分配给 onblur (this.onblur = function() {alert(); };)。但更好的是，将其与现代事件处理连接起来。由于您使用的是 jQuery，因此看起来像这样:

$(this).on("blur", function() {
    alert();
});