Question

这是一个分为两部分的问题。第一部分是如何以我调用函数的方式使用.preventDefault（）？

HTML：

<input type="hidden" name="_csrf" value="<%= csrfToken %>">
<a href="#" onclick="deleteItem(this)" class="button gray delete" data-id="<%= products._id %>"><i class="sl sl-icon-close"></i> Delete</a>

javascript：

const deleteItem = btn => {
  const productId = btn.dataset.id;
  const csrf = btn.parentNode.querySelector("[name=_csrf").value;
  const pendingLi = btn.closest("li");
  FreezeUI({ selector: ".dashboard-list-box", text: "Deleting" });

  axios
    .delete("/account/delete/" + productId, {
      headers: {
        "csrf-token": csrf
      }
    })
    .then(response => {
      UnFreezeUI();
      showSuccess(response);
      fadeOut(pendingLi, "remove");
    })
    .catch(error => {
      showError(error);
    });
};

由于我这里没有活动，

document.body.addEventListener("click", e => {

如何使用e.preventDefault（）？

PART 2问题：

哪个会是更好的方法？就像我的实际按钮具有onclick()或在我的scripts.js文件或页脚中添加事件侦听器一样？即：document.body.addEventListener("click", e => {

Answer 1

第一部分答案。您可以在方法调用中传递事件，例如

<input type="hidden" name="_csrf" value="<%= csrfToken %>">
<a href="#" onclick="deleteItem(event, this)" class="button gray delete" data-id="<%= products._id %>"><i class="sl sl-icon-close"></i> Delete</a>

然后在您的deleteItem方法中：

const deleteItem = (e, btn) => {
  e.preventDefault(); // added prevent default
  const productId = btn.dataset.id;
  const csrf = btn.parentNode.querySelector("[name=_csrf").value;
  const pendingLi = btn.closest("li");
  FreezeUI({ selector: ".dashboard-list-box", text: "Deleting" });

  axios
    .delete("/account/delete/" + productId, {
      headers: {
        "csrf-token": csrf
      }
    })
    .then(response => {
      UnFreezeUI();
      showSuccess(response);
      fadeOut(pendingLi, "remove");
    })
    .catch(error => {
      showError(error);
    });
};

第二部分答案：使用addEventListner始终是一个好习惯。这使您的代码更易于管理/维护。

Answer 2

您可以在内联函数调用中传递默认事件，例如

<button type='button' class='close' aria-label='Close' onClick='myfunction(event)'>

和脚本中

function myfunction(event) {
    event.preventDefault();
    //$(event.target).closest("td").closest("tr").remove();
    // try alert here.. should work
}

事件和相应的目标可以传播！

Answer 3

您只需传递参数名称事件。这将通过事件，您可以进行处理。我为你做了一个小例子。希望对您有帮助。

<html>
<head>
    <script>
        function test(e, btn) {
            console.log(e);//This is the event
            console.log(btn);//This is the button element
        }
    </script>
</head>
<body>
<button onclick="test(event, this)">Test Button</button>
</body>
</html>

第二个问题。两种方式都很好。您应该使用更易于维护的方式。

函数调用时的preventDefault

3 个答案: