javascript - 完全禁用父元素的焦点

Question

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

假设它是用键盘完成的，我可以使用以下方法来防止重复输入，或者完全禁用其中的所有元素，例如，tab-enter 也会以这种方式被禁用。

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

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

• 不能离开 a 标签。
• 不能使用几个可以控制浏览器的键盘快捷键。
• 能够从地址栏切换到禁用区域。

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

Answer 1

我认为处理您所说的事情的普遍接受的方法是使用模态，也就是说当他们单击该链接时，您会弹出一个框，上面写着“正在处理”或类似的东西，并且您创建了一个全屏 div，其 z-index 位于所有其他内容之上，这样用户就无法点击/与屏幕上的任何其他内容进行交互，直到您完成您正在做的任何事情。

参见 http://twitter.github.com/bootstrap/javascript.html#modals举个例子说明我在说什么。