protectDefault при вызове функции - PullRequest
Новая
       1

protectDefault при вызове функции

0 голосов
/ 15 января 2019

Это вопрос из 2 частей. Первая часть - как вы используете .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 ()?

ЧАСТЬ 2 ВОПРОС:

Какой был бы лучший способ сделать это? Как у меня с кнопкой на самом деле, имеющей onclick() или для добавления прослушивателя событий в мой файл scripts.js или нижний колонтитул? т.е.: document.body.addEventListener("click", e => {

Ответы [ 3 ]

0 голосов
/ 15 января 2019

Вы можете передать событие по умолчанию при вызове встроенной функции, например 

<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
}

событие и соответствующая цель могут быть распространены!

0 голосов
/ 15 января 2019

Вы просто передаете аргумент имя события. это пройдет событие, и вы можете справиться с этим. Я сделал небольшой пример для вас. надеюсь, это поможет .. 

<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>

И для второго вопроса. оба пути хороши. Вы должны использовать более удобный для вас способ обслуживания.

0 голосов
/ 15 января 2019

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);
    });
};

2-я часть Ответ: всегда полезно использовать addEventListner. это делает ваш код более управляемым / обслуживаемым.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...