Что происходит, когда вы размываете элемент DOM

Мне нелегко найти документацию о том, что такое «предположим», когда происходит размытие элемента DOM.Что происходит, когда вы размываете элемент DOM

Мое наивное предположение заключалось в том, что браузер переместился через DOM, чтобы найти следующий настраиваемый элемент, но, учитывая следующий jsfiddle, это, очевидно, не то, что происходит.

jsfiddle-example

<!-- HTML ----------------------------- --> 
<body> 
    <div id="root" tabindex="0">root 
     <div id="p1" tabindex="0">p1 
      <div id="p2" tabindex="0">p2 
      </div> 
     </div> 
    </div> 

</body> 

/* Javascript */ 
var root = document.getElementById("root"); 
var p1 = document.getElementById("p1"); 
var p2 = document.getElementById("p2"); 


root.addEventListener('keydown', function(event) { 
    console.log("root keydown"); 
}, false); 

p1.addEventListener('keydown', function(event) { 
    console.log("p1 keydown"); 
}, false); 

p2.addEventListener('keydown', function(event) { 

    console.log("p2 keydown - blurring p2, hoping that focus will move up the dom to p1"); 
    event.stopPropagation(); 

    p2.blur(); 
    if (document.activeElement !== p1) 
     console.log("well, that didn't work out so well :("); 
    console.log("focused element = "); 
    console.log(document.activeElement); 

}, false); 



p2.focus(); 
console.log("focused element = "); 
console.log(document.activeElement);

Так есть определение того, что должно произойти? То, что я вижу в Chrome, заключается в том, что activeElement перескакивает на body - и пропускает все фокусируемые элементы на этом пути. Неясно, является ли тело даже сфокусированным, или просто обработчик по умолчанию для activeElement, если ничего не сфокусировано.

Учитывая сложное объектно-ориентированное приложение javascript, в котором p2 не знает о p1, но предполагает, что что-либо выше в DOM будет получать фокус, я действительно полагаю, что вручную переверните DOM на каждом событии blur() и искать фокусируемые элементы и фокусировать их самостоятельно?

источник

2013-11-10 helifreak

Ближайшая вещь к спецификации об этом, вероятно, является description of focus в HTML5 CR (которая находится в процессе разработки), проект документа и может быть обновлена, заменена или устарела другими документами в любое время », но на практике закрыть к консенсусу). В нем говорится: «Не может быть целенаправленного элемента; когда ни один элемент не сфокусирован, ключевые события, полученные документом, должны быть нацелены на элемент body, если он есть, или в корневом элементе документа, если он есть. Если нет корневого элемента, события ключа не должны запускаться. »

Поскольку метод blur() определен (в формате DOM 2 HTML) просто как удаление фокуса, это означает, что вы должны оставить страницу в состоянии, где не сосредоточен ни один элемент. Но это может выглядеть так: элемент body был сфокусирован: если у вас есть, скажем, атрибут keypress, он запускается. Однако это отличается от сосредоточенного состояния. Например, в этой ситуации элемент body не соответствует селектору CSS :focus.

Вывод состоит в том, что обычно следует избегать использования blur() и делать focus() на каком-то подходящем фокусируемом элементе, как это предлагается в других ответах. Исключением является ситуация, когда вы просто хотите отказаться от всех событий клавиатуры. Тогда blur() в порядке, при условии, что ваш код не назначает никаких обработчиков событий клавиатуры для элемента body.

источник

2013-11-10 07:50:12

Я думаю, что это адекватно объясняет, откуда мое замешательство. Я ошибочно предполагал, что «что-то» всегда должно быть сосредоточено, особенно если элементы в DOM имеют «подсказки», что они могут быть сфокусированы (tabindex = 0). Который, я все еще думаю, совершенно логичен, но я начинаю учиться, что логика модели событий DOM мало что значительна. Я исхожу из мира фреймворков, где единственным входным сигналом является ввод с клавиатуры (или пульт дистанционного управления), и мне кажется странным, что есть возможность не иметь фокуса. – helifreak

Если вы просто хотите, чтобы убедиться, что один элемент получает фокус при другом получает размыто:

/* Javascript */ 
var root = document.getElementById("root"); 
var p1 = document.getElementById("p1"); 
var p2 = document.getElementById("p2"); 

p2.addEventListener('blur', function(event) { 
    p1.focus(); 
    activeEl(); 
}, false); 

p2.focus(); 
activeEl(); 
function activeEl() { 
    console.log("focused element = "); 
    console.log(document.activeElement); 
}

Fiddle: http://jsfiddle.net/2cWcA/

Вы можете расширить это так, что, когда любой элемент размыт, это родитель focus метод.

источник

2013-11-10 07:15:15 phatskat

Проблема заключается в том, что мой пример был слишком упрощенным ... на самом деле, я имею дело с гораздо большей клавиатурой только архитектура - p2 не знает о p1. Таким образом, даже если на p2 был обработчик размытия, он не знал бы сфокусировать p1. Но, похоже, мне придется самому управлять иерархией фокуса. – helifreak

Мое понимание таково, что blur просто означает неточность. Другими словами, сфокусированный элемент теряет фокус, и неясно, что, если угодно, получает фокус. Тот факт, что activeElement становится body, вероятно, является лишь побочным эффектом. Вместо того, чтобы устанавливать его на null, он устанавливается в тело, чтобы указать, что документ в целом по-прежнему имеет фокус.

источник

2013-11-10 07:25:35 nitro2k01

Не смотря на исходный код webkit, это похоже на то, насколько это возможно, но, как уже упоминалось ранее, я все еще удивляюсь, что концепция отсутствия фокуса приемлема - особенно когда другие элементы являются ориентируемыми и имеют прослушиватели событий прилагается. – helifreak

Фактически document.ActiveElement() фокусирует элемент. В фокусе javascript делается так, как document.getElementById('myAnchor').focus() Подробнее. Событие фокусировки запускается, когда посетитель фокусируется на элементе.

Не все элементы настраиваются по умолчанию. Например, INPUT и все типы или поля формы поддерживают это событие, A поддерживает его. В качестве контрпримера DIV не поддерживает фокус.

Список типов элементов, которые поддерживают фокусировку, несколько отличается между браузерами.

Благодаря

источник

2013-11-10 07:52:31

Что происходит, когда вы размываете элемент DOM

ответ

Смежные вопросы