e.preventDefault() 在 es6 箭头函数循环中不起作用

Question

我无法阻止默认在箭头函数中工作。

addEventListener on a querySelectorAll() with classList

我想用 es6 的方式来做。

var clickers = document.querySelectorAll('.clicker');

clickers.forEach(clicker => 
  clicker.addEventListener("click", (e) => 
    e.preventDefault();
    console.log("i clicked")
  )
);

<a href="#" class="clicker">test</a>
<a href="#" class="clicker">test</a>

我收到此错误：

"未捕获的语法错误：参数列表后缺少)

JavaScript: SyntaxError: missing ) after argument list

这不是 es6，所以这个答案还不够

我发现当你删除阻止默认值时它会消失

var clickers = document.querySelectorAll('.clicker');

clickers.forEach(clicker => 
  clicker.addEventListener("click", (e) => 
    console.log("i clicked")
  )
);

<a href="#" class="clicker">test</a>
<a href="#" class="clicker">test</a>

但行为是当您点击时它会转到页面顶部，或者更确切地说不会阻止默认

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list

我检查了上面的资源，但在特定上下文中没有帮助。

您如何解决此错误？如何防止 es6 箭头函数循环中的默认值？

Answer 1

您在箭头函数中的箭头后面缺少花括号。对于多行箭头函数，块需要花括号。

var clickers = document.querySelectorAll('.clicker');

clickers.forEach(clicker => 
  clicker.addEventListener("click", (e) => {
    e.preventDefault();
    console.log("i clicked")
  })
);

<a href="#" class="clicker">test</a>
<a href="#" class="clicker">test</a>

Answer 2

您需要{} 获取多个声明。

请注意，第二个参数是回调function，可以以不同的方式传递。基本形式是： clicker.addEventListener("click", function (e) { })

但您也可以在现代浏览器中使用 lambda 表达式。

var clickers = document.querySelectorAll('.clicker');

clickers.forEach(clicker => 
  clicker.addEventListener("click", (e) => 
  {  e.preventDefault();
    console.log("i clicked");
  })
);

<a href="#" class="clicker">test</a>
<a href="#" class="clicker">test</a>