什么会导致click（）方法失败？ [英] What can cause click() method to fail?

问题描述

我有一个HTML元素（一个复选框）：

 < button type =buttonclass = _f_V1 noMargin o365buttonaria-labelledby =_ ariaId_28role =checkboxaria-checked =false> 
< span class =_ fc_3 owaimg checkboxImage wf-size-checkboxMultiselectSize ms-bg-color-white ms-border-color-neutralSecondaryAlt> < /跨度> 
< span class =_ fc_4 o365buttonLabel _fc_2id =_ ariaId_28style =display：none;>< / span> 
< / button> 
  

请注意，它是一个按钮元素，即使其行为如同< input [我打算选择并点击这个元素，点击点击（< ）方法。选择是正确的，但 click（）方法失败。

我做了什么：

  document.querySelector（'._ f_V1.noMargin.o365button'）。click（）; 
  

然而没有任何反应 - 复选框不会被检查。

鉴于这个（第一个）元素只是一个类似元素列表中的一个，我也试过：

 <$ c $ （>）=> {
 document.querySelectorAll（'button span'）。forEach（（e）=> {
 e.click（）
}）; 
}）（）; 
  

同样，第一个和其他复选框都不会被选中。

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

<如果选择正确，为什么 click（）方法没有效果？

当我点击与鼠标---复选框是检查，但当我在同一元素上使用 click（）时，它不会。

如果您想尝试重现在线，则需要有一个包含已删除邮件的Hotmail电子邮件帐户。如果是这种情况： 转到已删除邮件

转到恢复删除的项目。

一个窗口将以已删除的会话打开。

会出现一个复选框（鼠标悬停后）。这是我遇到的元素。

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

解决方案

如果问题是：

导致click（）方法失败？

然后答案是：没什么！如果

那么现在该做什么？问另一个问题！一个更具体的。例如：如何[在Hotmail.com中恢复| deepDelete]所有已删除的邮件因为这是问题实际的目的 - 不确定，但我猜。

---

只是想再次强调一下：一般而言，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（）返回undefinedconsole.log（'yep HTMLElement.click（）returns：'，document.querySelector（'._ f_V1.noMargin.o365button'）。click（）） 

  button {width：100％;身高：100％;位置：固定}  

< button type =button class =_ f_V1 noMargin o365buttonaria-labelledby =_ ariaId_28role =checkboxaria-checked =false> < span class =_ fc_3 owaimg checkboxImage wf-size-checkboxMultiselectSize ms-bg-color-white ms-border-color-neutralSecondaryAlt> < /跨度> < span class =_ fc_4 o365buttonLabel _fc_2id =_ ariaId_28style =display：none;>< / span>< / button>

I have an element (a checkbox), with this 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>

Note it's a button element even though it behaves like an <input [type="checkbox"]>.

I aim to select and click on this element with the click() method. The selection is correct, but the click() method fails.

What I did:

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

Yet nothing happens - the checkbox won't be checked.

Given this (first) element is but one of a list of similar elements, I've also tried:

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

Again, neither the first, nor any other checkbox is selected.

From running querySelector() and querySelectorAll() (with their relevant selectors) in console, I get the elements I want (I don't get undefined), so it means my selections are correct.

Given the selections are correct, why would the click() method have no effect?

When I click with the mouse --- the checkbox is checked but when I use click() on the same element, it doesn't.

If you want to try to reproduce online, you need to have an Hotmail email account with messages that you've already deleted. If this is the case:

---

1. Go to "Deleted items".
2. Go to "recover deleted items".
3. a window will be opened with deleted conversations.
4. Near to each conversation there will be a checkbox (after mouseover). This is the element I'm having the trouble with.

Note: The mouseover just changes opacity of the checkboxes.

解决方案

If the question is:

What can cause click() method to fail?

Then the Answer is: Kinda NOTHING! If the click-method is available for an HTMLElement then calling HTMLElement.click() can not "fail" (in that sense). What could happen is that calling click on this element will not have the desired effect/impact - which is the case for the questions author! "just for the sake of completeness..."

---

After deeper investigation, here is my conclusion.

1. The actual event handlers that are responsible for checking and unchecking (and all that is related to it) are callbacks "listen to" mousedown-events on these button._f_V1.noMargin.o365button-elements (boot.worldwide.0.mouse.js:37); so you will not get anywhere triggering click-events. One may ask: "how can you say so?". I can say so because I removed ALL other event listeners first traversing up two parents and then from there on all the way down with each and every child element except for the button where I left the mousedown-eventListener. And the functionality was still intact. After removing also this last event listener the functionality was gone. So I guess: yep I can say so :)

2. My next step was to trigger a mousedown-event on the button like this:

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

   But NO this doesn't work.

3. So what about hysterically triggering events on every maybe-relevant element like this:

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

   NO - this also doesn't work.

4. So I came up with my last approach which didn't work either. Let’s mimic the attributes and properties from selected button. BTW the element that is actually responsible for making the "pseudo checkbox" look like checked/unchecked is the first span-childNode of the button-element. So if you type in the following code in the console of your browsers devtool everything will look exactly as it was properly clicked (or mousedowned so to say):

   $('._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)
   })
   

   See the screen capture below where I pastet the above snippet straight into devtools console and the "pseudo checkbox" appear as they where clicked.

So what to do now? Ask another question! One that is much more specific. Something like: "How to [recover|deepDelete] all deleted messages in hotmail.com" Because this is what the intent of the question actually is - not sure about it but I guess.

---

Just want to emphasize this once more: In general the code from OP and also the code in this answer works. It does right, so to say. But it’s not able to achieve what the author wants to achieve.

---

Additionally here is a proof that the OPs code is actually working:

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>

这篇关于什么会导致click（）方法失败？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！