我在页面上有一个div，其中显示了有关特定类别（图像，名称等）的一些信息。
当我单击编辑图像时，它将类别置于编辑模式，这使我可以更新名称。从下图可以看到，它表明“汤”当前处于编辑模式，其他汤池处于普通视图模式。通过使用“取消/保存”按钮，一切正常，一切正常。（我尝试添加图片，但不允许我，需要更多的爱）
但是，一旦进入编辑模式，如果我单击页面上其他任何地方（位于div之外），则预期结果将是汤类别将返回查看模式。在触发某种事件时，这还应该允许我询问他们是否要保存更改。
因此，我后来决定要做的是在“汤”父div上创建一个模糊事件。如果我单击页面上的任意位置，这将按预期工作，但是，如果单击div的内部元素，这也会导致触发父级模糊事件，从而使类别返回到查看模式。
因此，是否有一种方法可以防止父级div的任何子级获得焦点时触发模糊事件？
<div tabindex="-1" onblur="alert('outer')">
<input type="text" value="Soup" />
</div>
我只是在没有编译器的情况下编写了代码，所以不确定是否可以使用，但希望您能理解。
我正在使用Knockout.js来动态更新GUI，但这不会影响我没有想到的答案。
我以前不得不解决这个问题。我不确定这是否是最好的解决方案，但这是我最终使用的解决方案。
由于点击事件会在模糊之后触发，因此无法（跨浏览器，可靠的）方式来说明哪个元素获得了关注。
但是，将鼠标按下会在模糊之前触发。这意味着您可以在子元素的mousedown中设置一些标志，并在父元素的模糊中询问该标志。
工作示例：http : //jsfiddle.net/L5Cts/
请注意，keydown如果您还想捕捉由键盘引起的模糊，您还必须处理（并检查Tab / Shift-Tab）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句