keydown 事件仅触发一次

Question

以下脚本旨在在 facebook.com 的对话页面（用户可以查看其所有对话的页面）上运行。

该脚本的目的是自动化“删除对话”过程，该过程自然包括 4 次点击，当您有数百个对话时可能会很烦人且浪费时间 --- 删除将通过按“D”键从键盘完成。

我用 Greasemonkey 运行脚本。

---

脚本由 4 个主要部分组成：

1. 收听所有“D”键击事件。
2. 点击打开带有“删除”选项的模态的链接（小链轮）。
3. 单击该模式中的“删除”链接（它将打开第二个模式“删除确认”）。
4. 点击该模式中新的“删除”链接，以确认对话删除。

我的脚本

document.addEventListener('keydown', (k)=>{
    if ( k.keyCode === 68 ) {
        console.log('keydown: D');
        return dC();
    }
});

let dC = ()=>{
    document.querySelector('._5blh._4-0h').click();
    document.querySelector('.uiContextualLayer > [id^="js"] > div > ul > li:nth-child(4)').click();
    setTimeout(()=>{ document.querySelector('._3quh._30yy._2t_._3ay_._5ixy').click(); }, 500);
};

作为一个初学者，我尝试将部分代码放入函数中，我尝试使用for 而不是forEach() 进行迭代，我尝试在dC() 调用下使用return dC() 或return false。所有这些都产生了相同的结果，所以我绕着圈子不理解（或否认）我非常想念的更深层次的逻辑错误。

复制

安装为 Greasemonkey 脚本，（匹配为 https:www.facebook.com/* 仅用于测试），进入对话页面并点击“D”。

我的问题

为什么事件只被监听一次？也就是说，为什么单击 D 一次会使脚本工作，但任何进一步的单击都无济于事？

我必须刷新页面才能重用脚本，这不是预期的行为。

注意：我更喜欢原版解决方案。

Answer 1

正如所写，函数 dC()，它执行 4 个操作：

问题出在操作 #3：

看起来，每次点击 'settings' 菜单（action #2），都会创建一个新的 'settings-menu' 实例（新对象添加到 DOM），因此这一行不会工作：

document.querySelector('.uiContextualLayer > [id^="js"] > div > ul > li:nth-child(4)').click ();

一方面，querySelector 返回回答给定模式的 first 元素。

另一方面，Facebook 会在每次单击设置按钮时创建一个新的 '.uiContextualLayer'（定位菜单链轮链接并展开您的开发工具窗口以记录添加的新元素）。

因此，我们要做的是检查所有链轮元素之后，然后每次都使用最新（最后一个）元素：

let menu = document.querySelectorAll('.uiContextualLayer._5v-0._53il');
menu = menu[menu.length-1];

---

这是最终代码。
（我添加了几个超时以确保完成 UI 绘制）

let dC = ()=>
{
  // clicking the 'settings'
  document.querySelector('._5blh._4-0h').click();
  setTimeout(() => {
    // taking the last instance of 'menu popup':
    let menu = document.querySelectorAll('.uiContextualLayer._5v-0._53il');
    menu = menu[menu.length-1];

    // finding 'delete' button inside the menu popup
    let lis = menu.querySelectorAll('ul > li');
    let target = null;
    for (let i=0;!target && i<lis.length;++i)
    {
        let span = lis[i].querySelector('a span span');
        if (!span) continue;
        if (span.innerHTML.contains('Delete'))
            target = lis[i];
    }
    if (!target) {console.log('cannot find delete btn'); return;}


    // clicking 'delete' button in menu
    setTimeout(() => {
        target.click();

        setTimeout(()=>{ 
            // clicking delete in modal
            document.querySelector('._3quh._30yy._2t_._3ay_._5ixy').click(); 
        }, 500);

    }, 10);
  },10);
};

Answer 2

将键值推入数组并在事件结束后取消设置这些数组。

// Create two empty arrays
    var map = [];
    var down = [];

    $(document).on('keydown', 'body', function(e) {
// Check whether the map having any key values
      if (!map[e.which]) {
// Set the keydown value to down array
        down.push(e.which);

        if (down[0] === 68) {
          // Events to be done
        }
      }

    map[e.which] = true;
// Once the key-down pressed and event done ,the keyup unset the array while key up 
    }).keyup(function(e) {
      map[e.which] = false;

      // unset(down,e.which);  
      down = [];
      e.which = [];
    });