Как отменить привязку существующего события нажатия на кнопку и заменить его новым событием в Javascript - PullRequest
Новая
       11

Как отменить привязку существующего события нажатия на кнопку и заменить его новым событием в Javascript

0 голосов
/ 09 мая 2019

В основном я пытаюсь сделать следующее:

Я клонировал кнопку и скрыл существующую кнопку с клонированной.Я хочу связать новую функцию с клонированной кнопкой и удалить предыдущие события.

Я пробовал removeEventListener (), но не работал.

Я поделился куском кода, чтобы получитьлучшее понимание. 

let formSelector = document.querySelectorAll('form[action="/cart/add"]');
formSelector.forEach(function(e) {
e.setAttribute("data-plusbooster-offer", true);
let addToCart__button = e.querySelectorAll('[name="add"]') 
                      || e.querySelectorAll('[type="submit"]') 
                      || e.querySelectorAll(__addToCart__class__static);


addToCart__button.forEach(function(response) {
    let cloneBtn = response.cloneNode(true);
    cloneBtn.classList.add(["plusbooster__btn"],["__addUpsell"]);

    cloneBtn.setAttribute("onclick", "removeThat(this)");

    response.parentNode.insertBefore(cloneBtn, response);
    response.classList.add("plusbooster__hidden");
    response.style.display = "none";
  });
});

1 Ответ

1 голос
/ 09 мая 2019

Используйте addEventListener и removeEventListener, предоставляя ссылку на такую ​​же функцию обработчика событий

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

В следующем примере вы можете увидеть подходящий способ присоединения и удаления прослушивателей событий: 

// select element
let myElement = document.getElementById('myElement');

// Handler 1
function myHandler_1(e){
    alert('Handler 1')
}

// Handler 2
function myHandler_2(e){
    alert('Handler 2')
}

// add a click event listener using myHandler_1()
myElement.addEventListener('click',myHandler_1)
// remove the previous assigned event handler
myElement.removeEventListener('click',myHandler_1)

// add another click event listener using myHandler_2()
myElement.addEventListener('click',myHandler_2)

// test : on click event you will see how the first 
// listener has been removed, and instead only the 
// second one is triggered
<div id="myElement">click me</div>

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

...