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电子邮件帐户，其中包含您已删除的邮件。如果是这种情况：

转到“已删除的项目”。
转到“恢复已删除的项目”。
将打开一个窗口，其中包含已删除的会话。
每个会话附近都会有一个复选框（鼠标悬停后）。这是我遇到麻烦的元素。

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

Answer 1

如果问题是：

什么会导致click（）方法失败？

然后答案是：有点没事！如果click-method可用于HTMLElement，则调用HTMLElement.click()不能“失败”（在这种意义上）。可能会发生的是，调用点击此元素将不会产生预期的效果/影响 - 问题作者就是这种情况！ “只是为了完整......”

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

负责检查和取消选中（以及与之相关的所有事件）的实际事件处理程序是回调“监听”mousedown - 这些button._f_V1.noMargin.o365button上的事件 - 元素（{{3} }）;所以你不会在任何地方触发click - 事件。有人可能会问：“你怎么能这么说？”我可以这么说，因为我删除了所有其他事件监听器，首先遍历两个父母，然后从那里一直向下与每个子元素，除了button我离开mousedown - eventListener 。功能仍然完好无损。在删除最后一个事件监听器后，功能也消失了。所以我猜：是的，我可以这么说:)。
我的下一步是在mousedown上触发button - 事件，如下所示：
```
$('._f_V1.noMargin.o365button').each(function() {
    $(this).mousedown();
})
```
但不，这不起作用。

那么在每个可能相关的元素上歇斯底里地触发事件呢：

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

不 - 这也行不通。

所以我提出了我的最后一种方法，但也没有用。让我们模仿选定button的属性和属性。 BTW实际上负责使“伪复选框”看起来像是选中/取消选中的元素是span - {element}元素的第一个button - childNode。因此，如果您在浏览器devtool的控制台中输入以下代码，那么所有内容都将与正确点击的内容完全相同（或者说是mousedowned）：
```
$('._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控制台中，并在点击的位置显示“伪复选框”。

boot.worldwide.0.mouse.js:37

那么现在该怎么办？问另一个问题！一个更具体的。类似的东西：“如何[recover | deepDelete] hotmail.com中所有已删除的邮件”因为这就是问题的意图实际上是 - 不确定但是我想。

只想再次强调一下：一般来说，OP中的代码以及此答案中的代码都可以使用。它说得对，可以这么说。但它无法达到作者想要达到的目的。

此外，这是OPs代码实际工作的证明：

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>

Answer 2

您可以使用jQuery click method进行尝试，jQuery method each仅适用于创建的jQuery集合：

jQuery( 'your whatever selector(s) here' ) // form here on you can call .click() now

因此，您可以采取以下具体方法：

jQuery('._f_V1.noMargin.o365button').click();

以及：

jQuery('button span').click();

由于jQuery click方法仅触发jQuery集合的第一个DOM元素上的on click事件，因此可以将其与rand结合使用，如下所示：

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

以及：

jQuery('button span').each(function() {
    $(this).click();
});

Answer 3

 function handelClick(){
  if(this.getAttribute("aria-checked")=="true"){
   this.setAttribute("aria-checked", "false");
  }else{
  this.setAttribute("aria-checked", "true");
 }
}
var button=document.getElementsByTagName('button');

for (var i = 0; i < button.length; i++) {
 button[i].addEventListener('click', handelClick);}

 goto https://jsfiddle.net/7xnwpgbk/5/
 it may help you

什么可能导致click（）方法失败？

我做了什么：

3 个答案: