javascript - 什么会导致 click() 方法失败？

Question

我有一个元素(一个复选框)，带有这个 HTML:

<button type="button" class="_f_V1 noMargin o365button" aria-labelledby="_ariaId_28" role="checkbox" aria-checked="false">
    <span class="_fc_3 owaimg checkboxImage wf-size-checkboxMultiselectSize ms-bg-color-white ms-border-color-neutralSecondaryAlt"> </span>
    <span class="_fc_4 o365buttonLabel _fc_2" id="_ariaId_28" style="display: none;"></span>
</button>

注意它是一个按钮元素，尽管它的行为类似于 <input [type="checkbox"]> .

我的目标是使用 click() 选择并单击此元素方法。选择正确，但 click()方法失败。

我做了什么:

document.querySelector('._f_V1.noMargin.o365button').click();

但什么也没有发生 - 复选框不会被选中。

鉴于此(第一个)元素只是类似元素列表中的一个，我也尝试过:

(()=>{
    document.querySelectorAll('button span').forEach((e)=>{
        e.click()
    });
})();

同样，第一个复选框和任何其他复选框都没有被选中。

来自运行querySelector()和 querySelectorAll() (及其相关的选择器)在控制台中，我得到了我想要的元素(我没有得到 undefined )，所以这意味着我的选择是正确的。

鉴于选择是正确的，为什么 click()方法没有效果？

当我用鼠标单击时 --- 复选框被选中 但是当我使用 click() 时在同一个元素上，它没有。

如果您想尝试在线 复制，您需要拥有一个包含已删除邮件的 Hotmail 电子邮件帐户。如果是这种情况:

---

1. 转到“已删除的元素”。
2. 转到“恢复已删除的元素”。
3. 将打开一个包含已删除对话的窗口。
4. 每个对话旁边都会有一个复选框(鼠标悬停后)。这是我遇到问题的元素。

注意:鼠标悬停只会改变复选框的不透明度。

Answer 1

如果问题是:

What can cause click() method to fail?

那么答案是:没什么!如果 click-method可用于 HTMLElement 然后调用 HTMLElement.click() 不能“失败”(在那个意义上)。可能发生的情况是调用此元素的单击不会产生预期的效果/影响 - 问题作者就是这种情况! “只是为了完整性......”

---

经过深入调查，这是我的结论。

1. 负责检查和取消检查(以及与之相关的所有事件)的实际事件处理程序是回调“监听”mousedown - 这些 button._f_V1.noMargin 上的事件。 o365button-元素(boot.worldwide.0.mouse.js:37)；所以你不会在任何地方触发 click 事件。有人可能会问:“你怎么能这样说？”。我可以这么说，因为我删除了所有其他事件监听器，首先遍历两个父元素，然后从那里一直向下遍历每个子元素，除了 button 我离开 mousedown -事件监听器。而且功能仍然完好无损。在删除最后一个事件监听器之后，该功能消失了。所以我想:是的，我可以这么说 :)

2. 我的下一步是在 button 上触发一个 mousedown 事件，如下所示:

   $('._f_V1.noMargin.o365button').each(function() {
       $(this).mousedown();
   })
   

   但是不，这是行不通的。

3. 那么像这样在每个可能相关的元素上歇斯底里地触发事件怎么样:

   var $El = $('._f_V1.noMargin.o365button').parent().parent();
   $El.add( $El.find('*') ).each(function() {
       $(this).mousedown().mouseup().click();
       // may be one event is cancelling the result of another one out
       // so I also tried $(this).mousedown()
   });
   

   不——这也行不通。

4. 所以我想出了我最后的方法，但也没有用。让我们模拟所选 button 的属性和属性。顺便说一句，实际上负责使“伪复选框”看起来像已选中/未选中的元素是 button 元素的第一个 span-childNode。因此，如果您在浏览器 devtool 的控制台中输入以下代码，一切看起来都将与正确单击(或者说鼠标按下)完全一样:

   $('._f_V1.noMargin.o365button').each(function() {
       $(this).trigger('mousedown').addClass('_f_V1 noMargin o365button _f_W1').attr('aria-checked', 'true').prop('aria-checked', true)
           .children(':first').trigger('mousedown').addClass('_fc_3 owaimg ms-Icon--check wf-size-checkboxMultiselectSize ms-bgc-w ms-fcl-nsa-b ms-fcl-ns-b ms-border-color-neutralSecondaryAlt')
               .parent().parent().parent().trigger('mousedown').attr('aria-selected', 'true').prop('aria-selected', true)
   })
   

   请看下面的屏幕截图，我将上面的代码片段直接粘贴到 devtools 控制台中，“伪复选框”在它们被点击时出现。

   

那现在怎么办？再问一个问题!一个更具体。类似于:“How to [recover|deepDelete] all deleted messages in hotmail.com” 因为这实际上是问题的意图 - 不确定，但我猜。

---

只想再次强调这一点:一般来说，来自 OP 的代码以及此答案中的代码都有效。它确实是正确的，可以这么说。但是并不能达到作者想要达到的目的。

---

此外，这里还有一个证明 OP 代码确实有效的证据:

document.querySelector('._f_V1.noMargin.o365button').addEventListener(
  'click', function() { console.log('jepp') }
);

document.querySelector('._f_V1.noMargin.o365button').click();
// BTW: yep HTMLElement.click() returns undefined
console.log(
  'yep HTMLElement.click() returns: ',
  document.querySelector('._f_V1.noMargin.o365button').click()
)

button {width: 100%; height: 100%; position: fixed}

<button type="button" class="_f_V1 noMargin o365button" aria-labelledby="_ariaId_28" role="checkbox" aria-checked="false">
    <span class="_fc_3 owaimg checkboxImage wf-size-checkboxMultiselectSize ms-bg-color-white ms-border-color-neutralSecondaryAlt"> </span>
    <span class="_fc_4 o365buttonLabel _fc_2" id="_ariaId_28" style="display: none;"></span>
</button>