Chrome 71 не обнаруживает идентификатор в событии onclick, если это не this.id

Question

У меня есть такой HTML-элемент:

<select id="myselect" onclick="jsDoSomething(id)"><option>1</option><option>2</option></select>

До Chrome 70 все работало нормально, а в Chrome 71 id является нулевым внутри функции jsDoSomething.Я должен изменить его на this.id, чтобы он работал.Это ошибка или ... особенность Chrome 71?

Заранее спасибо.

Редактировать: это происходит как для тегов select, так и a, но не для button теги.

Edit2: jsfiddle: http://jsfiddle.net/5L0djvqy/10/

Answer 1

Насколько я могу судить, согласно быстрому исследованию, это ошибка в браузере.

Согласно стандарту HTML [1], такие встроенные обработчики должны инициализироваться браузером с помощью FunctionCreateгде Scope назначается следующим образом:

Если элемент не равен нулю, пусть Scope будет NewObjectEnvironment(element, Scope).

Давайте расшифруем это, обратившись кспецификация языка ECMAScript 2019 [2].По-видимому, NewObjectEnvironment(element, Scope) создает новую лексическую среду, в которой изначально определенные имена переменных берутся из объекта, переданного в качестве первого аргумента - element.Представьте себе, что вы берете все свойства element (объект Element), перебираете их (независимо от того, перечислимы они или нет) и помещаете их в переменные, названные в честь этих свойств.Спецификация описывает это следующим образом:

Каждый объект Environment Record связан с объектом, называемым его объектом привязки.Запись среды объекта связывает набор имен строковых идентификаторов, которые непосредственно соответствуют именам свойств его объекта привязки.

Следовательно, создается впечатление, что обратный вызов, созданный из строки в onclick, должендействительно, все свойства вашего <select> элемента доступны в области действия , включая id.

Список литературы:

1. https://html.spec.whatwg.org/multipage/webappapis.html#handler-onclick
2. https://tc39.github.io/ecma262/#sec-newobjectenvironment

Answer 2

Отсюда:

https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm

Scope

Если eventHandler является обработчиком события элемента, то пусть Scope будет NewObjectEnvironment (document,глобальная среда) .

В противном случае eventHandler является обработчиком событий объекта Window: пусть Scope будет глобальной средой.

Если владелец формы не равен NULL, пусть Scope будет NewObjectEnvironment (формавладелец, Scope).

Если элемент не равен NULL, пусть Scope будет NewObjectEnvironment (element, Scope) .

Так что поведение выглядит стандартным(удивительно, я никогда этого не делаю), поэтому в Chrome что-то не работает.

Но я протестировал простой код на Chrome 71 в Linux и получил «ожидаемый» результат.Возможно, у вас где-то нарушена структура HTML, и элемент не является текущим selectbox

Answer 3

Парсинг данных как это - действительно старый способ делать подобные вещи, и последняя версия Chrome больше не поддерживает это.

Способ получить элементы DOM теперь должен быть сделан следующим образом:

document.querySelector('#myselect');
document.getElementById('myselect');

Предпочитайте получать информацию о dom непосредственно в вашем файле .js, а не анализировать информацию, подобную этой.