Cannot remove EventListener when 'mouseout' occurs

Cannot remove EventListener when 'mouseout' occurs

本文关键字：mouseout occurs remove EventListener Cannot when      更新时间：2023-09-26

当mouseout事件发生时，我不知道为什么不能删除EventListener。当一个表行悬停时，我想激活EventListener('keydown')。原因是我想使用"删除"键，删除悬停的行，当它被悬停时。我认为问题可能是由以下事实引起的：keydown事件附加到document，而不是它所针对的某个元素。然而，将它添加到某个元素中不是不可能吗？

    var table = document.querySelector('tbody');
    var rows = table.querySelectorAll('tr');
    for (i = 0; i < rows.length; i++) 
    {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row, showHide) 
            {
                return function() 
                { 
                    console.log('showHide ',showHide);
                    if (showHide === 'hover' )
                    {
                        document.addEventListener('keydown' ,function(ev)
                        {
                            if (showHide == 'hover')
                            {
                                console.log('hover target ', ev.target);
                            }
                        },false);
                        return;
                    }
                    else if (showHide === 'leave')
                    {
                        document.removeEventListener('keydown' ,function(ev)
                        {
                            if (ev.target && showHide === 'leave')
                            {
                                console.log('out ',ev);
                            }
                        },false);                           
                        console.log('left');
                    }
                 };
            };
        currentRow.addEventListener('mouseover', createClickHandler(currentRow, 'hover'), false);
        currentRow.addEventListener('mouseout', createClickHandler(currentRow, 'leave'), false);
    }

_______________________________________

[EDIT]

我想我已经解决了我的问题，但对于简单的解决方案来说，EventListener的代码似乎太长，有点太多了。

有人能告诉我如何缩短此代码吗。。。？

var table = document.querySelector('tbody');
        var rows = table.querySelectorAll('tr');
    for (i = 0; i < rows.length; i++) 
    {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row, showHide) 
            {
                return function() 
                { 
                    var delKey = function(ev)
                    {
                        console.log('hover target ', ev.target);
                    };
                    console.log('showHide ',showHide);
                    if (showHide === 'hover' )
                    {
                        //console.log('hovered ',row);
                        document.addEventListener('keydown' ,delKey,false);
                        document.addEventListener('keyup' ,function(){
                            document.removeEventListener('keydown',delKey,false);
                            console.log('removed event ');
                        },false);
                        document.body.addEventListener('click', function()
                        {
                            document.removeEventListener('keydown', delKey, false);
                        },false);
                    }
                    else if (showHide === 'leave')
                    {
                        console.log('hidden ');
                    }
                };
            };
        currentRow.addEventListener('mouseover', createClickHandler(currentRow, 'hover'), false);
        currentRow.addEventListener('mouseout', createClickHandler(currentRow, 'leave'), false);
    }

EventTarget.removeEventListener应该使用添加了addEventListener的侦听器进行调用，而不是使用新函数。您实际上是在告诉document删除从未添加过的侦听器。

这样做：

var listener = document.addEventListener('keydown', function(e) { ... });
document.removeEventListener('keydown', listener);

编辑：工作示例

var table = document.querySelector('tbody');
var rows = table.querySelectorAll('tr');
var log = document.getElementById('log');
for (i = 0; i < rows.length; i++) {
  var currentRow = table.rows[i];
  var createClickHandler = function(row, showHide) {
    return function() {
      var listener;
      
      console.log('showHide ',showHide);
      if (showHide === 'hover') {
        listener = document.addEventListener('keydown', function(ev) {
          if (showHide == 'hover') {
            console.log('hover target ', ev.target);
          }
        }, false);
        return;
      } else if (showHide === 'leave') {
        document.removeEventListener('keydown', listener, false);                           
        console.log('left');
      }
    };
  };
  currentRow.addEventListener('mouseover', createClickHandler(currentRow, 'hover'), false);
  currentRow.addEventListener('mouseout', createClickHandler(currentRow, 'leave'), false);
}
// don't do that -- only for demo purposes
console.log = function() { log.innerHTML = log.innerHTML + '<br>' + [].slice.call(arguments).join(' '); };
<table>
  <tbody>
    <tr><td>row 1</td></tr>
    <tr><td>row 2</td></tr>
    <tr><td>row 3</td></tr>
  </tbody>
</table>
<div id="log"></div>

相关文章：