Question

我的问题是，当在特定行上设置断点时，我的代码可以在控制台上运行，但是在运行脚本或在任何其他行上使用断点时，我的代码不起作用。

我有一个带有keyup侦听器的输入字段，即使在粘贴了输入的情况下，该字段也会触发，因此我正在尝试开发一种解决方案，该解决方案可以识别粘贴的输入并在这样做的同时删除keyup侦听器。

当我在删除keyup侦听器的行上设置一个Breakpoint时，代码在控制台中运行良好，但是当我直接在页面上运行脚本或在任何其他行上使用Breakpoint时，该代码都不起作用。我尝试了“ DOMContentLoaded”，window.load，检查“ document.readyState”，移动了变量和函数，但仍然无济于事。

//Recognizes pasted inputs and calls to remove "Keyup" listener

searchInput.onpaste = function remove() {keyupListener();};


//Removes "Keyup" listener

function keyupListener() {
//Here's where it works when I set a Breakpoint
   searchInput.removeEventListener('keyup', dynamicPagination); 
}

// Keyup listener

searchInput.addEventListener('keyup', () => {
   dynamicPagination();
});

searchButton.addEventListener('click', () => {
   dynamicPagination();
});

该代码不起作用时的行为是，它不读取removeEventListener，并使用粘贴的输入启动keyup处理程序。

我只对香草JS解决方案感兴趣。

Answer 1

//Recognizes pasted inputs and calls to remove "Keyup" listener

var pasted = false;
searchInput.onpaste = function() {pasted=true;};

// Keyup listener
searchInput.addEventListener('keyup', () => {
    if(!pasted) dynamicPagination();
});

searchButton.addEventListener('click', () => {
   if(!pasted) dynamicPagination();
});
//---------------------------------------------------------
Try the below code:- 
//---------------------------------------------------------
<textarea rows=5 cols=50 id=inpt></textarea><button id=btn>buttonn</button>
<div id=dv></div>
<script>
(function(){
var pasted = false;
var searchInput = document.getElementById('inpt');
searchInput.onpaste = function() {pasted=true;};

// Keyup listener
searchInput.addEventListener('keyup', () => {
    if(!pasted) dynamicPagination();
    dv.innerHTML += "<BR>pasted: " + (++dynCnt);
    pasted = false;
});

var searchButton = document.getElementById('btn');
searchButton.addEventListener('click', () => {
   if(!pasted) dynamicPagination();
   dv.innerHTML += "<BR>pasted= " + (++dynCnt);
   pasted = false;
});


var dv = document.getElementById('dv');
dv.innerHTML = "";
var dynCnt = 0;
function dynamicPagination() {
    dv.innerHTML += "<BR>dynamicPagination" + (++dynCnt);
}
})();
</script>
//---------------------------------------------------------

代码可以在控制台上运行，但不能在脚本上运行

1 个答案: