Question

我有一个谜：)可以说，我有一个内容可编辑的div，如下所示：

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

我有两个按钮：

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

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

两个按钮都调用相同的javascript函数，因此每次您单击其中一个按钮时，都会重复此功能。

这让我头疼：我在脚本中添加了一个Eventlistener，以保存在editor-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来执行此操作。 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可以做到吗？

单击按钮后如何删除eventListener？

2 个答案: