时间戳

首页 > 解决方案 > e.preventDefault() 在 es6 箭头函数循环中不起作用

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

问题描述

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

带有 classList 的 querySelectorAll() 上的 addEventListener

我想用 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>

我收到此错误：

“未捕获的 SyntaxError：缺少）在参数列表之后

JavaScript: SyntaxError: missing ) 在参数列表之后

这不是 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 箭头函数循环中的默认值？

标签： javascriptecmascript-6

解决方案

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

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>

推荐阅读