Javascript onblur无法正常运行

Question

我正在尝试创建一个允许编辑div的函数，当不再聚焦时（比如在元素外部点击），它应该执行一个函数。

在小提琴中测试时，不会发生预期的响应。相反，当单击该元素时，它既可以使内容可编辑，又可以同时执行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();
});