HTML DOM focus() 方法之原理

原创！转载清注明出自http://blog.csdn.net/lichwei1983

1 支持焦点

W3C规定，只有web page明确设置了tabIndex的Element才定义为支持焦点，他是这么定义一个Node是否支持焦点的：

bool Node::supportsFocus() const

{

   return hasRareData() && rareData()->tabIndexSetExplicitly();

}

2 可被设置焦点

首先，Node必须支持焦点，其次，此Node的render对象RenderBox必须存在，而且此RenderBox的style属性设置为可见

bool Node::isFocusable() const

{

   if (!inDocument() || !supportsFocus())

       return false;

   

   if (renderer())

       ASSERT(!renderer()->needsLayout());

   else

       // If the node is in a display:none tree it might say it needs style recalc but

       // the whole document is actually up to date.

       ASSERT(!document()->childNeedsStyleRecalc());

   

   // FIXME: Even if we are not visible, we might have a child that is visible.

   // Hyatt wants to fix that some day with a "has visible content" flag or the like.

   if (!renderer() || renderer()->style()->visibility() != VISIBLE)

       return false;

   return true;

}

3 按键可获取焦点

一个Element能否获取焦点，取决于：

1）自己“可被设置焦点”

2）tabIndex是正整数

bool Node::isKeyboardFocusable(KeyboardEvent*) const

{

   return isFocusable() && tabIndex() >= 0;

}

4 鼠标可获取焦点

只需要判断“可被获取焦点”就行了：

bool Node::isMouseFocusable() const

{

   return isFocusable();

}