Question

我不知道为什么在EventListener事件发生时我无法移除mouseout。当一个表行悬停时，我想激活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);
    }

_______________________________________

[编辑]

我认为我已经解决了我的问题，但代码似乎太长了，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);
    }

Answer 1

应该使用添加了addEventListener的侦听器调用

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

这样做：

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

修改：工作示例

＆＃13;

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(' '); };

＆＃13;

<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>

＆＃13;

发生'mouseout'时无法删除EventListener

1 个答案: