Question

我今天开始使用Brave并注意到我的一些网络应用/网站无效。具体来说，一些按钮没有得到处理。因此，为了排除故障，我添加了一个带有窗口点击处理程序的IIFE来记录this.id.勇敢的控制台说undefined然而html按钮元素明确定义了id属性？我错过了什么，或者Brave还没有完全出炉？

(function() {
  console.log('IIFE Fired.');
  window.addEventListener("click", clickHandler);
  
  function clickHandler() {
      console.log(this.id);
  }
}());

<head>
  <link href='//fonts.googleapis.com/css?family=Roboto:400,700,100,300,700italic,500,500italic,400italic,300italic,100italic|Roboto+Condensed:300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="//code.getmdl.io/1.3.0/material.grey-deep_orange.min.css" />
</head>

<body>
  <button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="credential-save">
    Save
  </button>

  <script src="//code.getmdl.io/1.2.1/material.min.js"></script>
</body>

(function() {
  console.log('IIFE Fired.');
  window.addEventListener("click", clickHandler);

  function clickHandler() {
      console.log(this.id);
  }
}());

Answer 1

完全可以预料到这一点。在事件侦听器中，this是当前事件目标。也就是说，它是您添加事件侦听器的节点。在这种情况下，它是window。它没有id。

window.addEventListener("click", function() {
  console.log(this === window); // true
});

<button>Save</button>

您应该不委托事件并将事件监听器添加到按钮，或使用事件目标。

window.addEventListener("click", function(e) {
  console.log(e.target.id);
});

<button id="credential-save">Save</button>

Answer 2

您已将事件侦听器分配给窗口。我认为，当它被分配给按钮时，它的id将是log。这是你的HTML。

npm install

这就是js

<button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="credential-save">
Save
</button>

Brave Browser的事件监听器/ .getElementById问题

2 个答案: