Question

如果我有一个侦听多个事件的事件侦听器，是否可以使其每个用户操作仅触发一次，即使单个用户操作产生多个事件？或者，有没有办法确定该处理程序是否已为用户操作触发？

例如，在this jsfiddle（下面的代码段）中，每次我在文本框（input）中键入时都会调用一次处理程序，当我离开文本框（change ).

但是，当我单击复选框时，它会被调用两次（一次用于 input，一次用于 change）。尽管有多种方法可以缓解这种情况（例如，通过查看事件来自哪种类型的输入以及它是否是忽略“输入”事件的复选框 EDIT: 或通过将处理程序更改为仅侦听 input事件，这意味着处理程序仅在此特定示例中被调用一次，但没有回答我的问题），我想知道是否有一种内置方法可以防止在来自单个用户时对处理程序进行多次调用行动。

$('input').on('input change', function(e) {
$('#events').append('triggered by '+$(e.target).attr('id')+'<br>');
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div>
Text input: <input type="text" id="text-input">
</div>

<div>
Checkbox: <input type="checkbox" id="checkbox-input">
</div>

<div>
  <input type="button" value="Clear" onclick="$('#events').html('');">
</div>
<div id="events">
</div>

Answer 1

这只是一个概念性的解决方案，我不确定它在生产中的实用性。

根据该免责声明，您可以使用计时器将某些内容存储在元素数据中以重置它。对于复选框不会同时触发 chaange 和 input 事件的情况，这可以正常工作。对于文本输入，情况有所不同，因为直到元素未聚焦时才会触发更改事件，而输入事件会针对每个键、粘贴或剪切而触发。

$('input').on('input change', (e) => {
   const $el = $(e.currentTarget),
         prevEvent = $el.data('prevEvent');
   if(prevEvent){
      e.stopPropagation();
      e.preventDefault();
   }else{
      $el.data('prevEvent', true);
      setTimeout(()=> $el.data('prevEvent', false), 200)
      $('#events').append(e.type + 'event triggered on '+e.currentTarget.id+'<br>');
   }
         

});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div>
Text input: <input type="text" id="text-input">
</div>

<div>
Checkbox: <input type="checkbox" id="checkbox-input">
</div>

<div>
  <input type="button" value="Clear" onclick="$('#events').html('');">
</div>
<div id="events">
</div>

如何为仅触发一次的多个事件添加事件侦听器？

1 个答案: