Как удалить eventListener после нажатия кнопки?

Question

У меня есть загадка :) Допустим, у меня есть div для редактирования контента, подобный этому:

<div id="editor" contenteditable="true">

И у меня есть две кнопки:

<div id="button1" onclick="do some javascript">

<div id="button2" onclick="do some javascript">

Обе кнопки вызывают одну и ту же функцию javascript, поэтому эта функция будет повторяться при каждом нажатии одной из кнопок.

Это вызывает у меня головную боль: я добавил Eventlistener в скрипт, чтобы сохранить дерьмо, которое пишется в редакторе div. Этот eventListener должен быть активен только до тех пор, пока не будет нажата следующая кнопка.

Если следующая кнопка нажата, то eventListener необходимо удалить. Как я могу удалить этот EventListener после нажатия кнопки?

Я уже пробовал это:

var editable = document.getElementById('editor');
editable.addEventListener('keydown', keydownsave, true);

keydownsave = function(e) {
    // voer code alleen uit als spatie of enter wordt gebruikt
    var toets = e.keyCode;
    var ctrls = e.ctrlKey;
    if (toets == 32 || toets == 13 || ctrls == true && toets == 83)

Это код, с которого я начал:

editable.addEventListener('keydown', function save(e) {

​    // voer code alleen uit als spatie of enter wordt gebruikt

​    var toets = e.keyCode;

​    var ctrls = e.ctrlKey;

​    if (toets == 32 || toets == 13 || ctrls == true && toets == 83)

{   rest of the function```

Answer 1

Вы можете использовать unbind для этого. отвязать

$('#t').click(function() {
alert('clicked')
})

$('#t').on('mouseover',function() {
$(this).html('mouse over')
})

$('#t').on('mouseout',function() {
$(this).html('button with event listeners')
})

function removeEventListeners() {
$('#t').unbind()
$('span').html('this button has no events')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id=t>button with event listeners</button>

<span>this button has click, mouse over and mouse out event</span>

<br>
<button onclick="removeEventListeners()">remove event listeners</button>

Answer 2

Я на самом деле создаю связку этих кнопок div на лету:

<div id="subchaptertitle" data-chapid="1" data-subid="1" onclick="javascript:open_editor()">bos in brand</div>

Каждая кнопка имеет разные данные и с onclick они запускают функцию open_editor.

Таким образом, новый экземпляр функции вызывается каждый раз, когда вы нажимаете одну из кнопок.Но эти функции никогда не закрываются, что означает, что они продолжают работать в фоновом режиме, нарушая способ, которым я сохраняю вещи.

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