完全禁用父元素的焦点

Question

假设我有一个链接，当单击链接时，它将淡出整个页面。 我淡出该页面的原因是因为下一页即将加载，但尚未加载。 我可以使用pointer-events: none会禁用任何鼠标事件，直到加载下一页。

假设它是用键盘完成的，我可以使用以下命令防止重复输入，或者彻底禁用其中的所有元素，例如，也可以通过这种方式禁用tab-enter。

parent.onkeydown = fals
parent.onkeyup = fals
parent.onkeypress = fals
function fals() {return false}

这对于短载荷效果很好，但如果加载时间较长，则用户可能会注意到以下困难。

• 无法在标签旁边远离标签。
• 无法使用几个可以控制浏览器的键盘快捷键。
• 可以从地址栏进入禁用区域。

除了为所有子元素设置onfocus = blur之外，是否有一种现代且巧妙的方法来防止这三个问题？ 我今天不在乎IE。

Answer 1

我认为，处理诸如您所谈论的内容之类的公认方法是使用Modal，也就是说，当他们单击该链接时，您会弹出一个框，上面写着“正在处理”或类似内容，然后您创建具有z索引的全屏div，使其在所有其他内容之上，因此用户无法点击或与屏幕上的其他任何内容进行交互，直到您完成所要执行的操作为止。

有关我正在谈论的示例，请参见http://twitter.github.com/bootstrap/javascript.html#modals 。