范围

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

从这里：

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

范围

如果eventHandler是元素的事件处理程序，则让Scope为NewObjectEnvironment（文档，全局环境）。

否则，eventHandler是Window对象的事件处理程序：let Scope   成为全球环境。

如果表单所有者不为null，则将Scope设为NewObjectEnvironment（form   所有者，范围）。

如果element不为null，则将Scope设为NewObjectEnvironment（element，Scope）。

因此，该行为似乎是标准行为（很遗憾，我从未这样做），因此在Chrome上似乎有些问题。

但是，我已经在Linux上的Chrome 71上测试了一个简单的代码，并且得到了“预期”结果。也许您的HTML结构在某个地方坏了，而该元素不是当前的选择框

Answer 2

根据快速研究，就我所知，这是浏览器中的错误。

根据HTML标准[1]，此类内联处理程序应由浏览器使用FunctionCreate进行初始化，其中Scope的分配如下：

如果element不为null，则将Scope设为NewObjectEnvironment(element, Scope)。

让我们通过参考ECMAScript 2019语言规范[2]来对此进行解读。显然，NewObjectEnvironment(element, Scope)创建了一个新的词法环境，其中初始定义的变量名称取自作为第一个参数传递的对象element。可以将其视为获取element（Element对象）的所有属性，对其进行迭代（无论它们是否可枚举），然后将其放入以这些属性命名的变量中。规范对此进行了如下描述：

每个对象环境记录都与一个称为其绑定对象的对象相关联。对象环境记录绑定直接与其绑定对象的属性名称相对应的一组字符串标识符名称。

因此，似乎从onclick中的字符串创建的回调确实应该具有您的<select>元素的所有属性，它们在范围内可用，包括{{1 }}。

参考文献：

Answer 3

解析这样的数据是做这种事情的一种非常古老的方法，而最新版本的Chrome不再支持此功能。

现在必须像这样完成DOM元素的获取：

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

宁愿直接从.js文件中获取dom信息，也不愿像这样解析信息。

chrome 71不会在onclick事件中检测到id，除非它是this.id

3 个答案:

范围