无法点击的不可见JavaScript元素，为什么点击事件监听器不起作用？

Question

我想在特定网站的文本区域上调用点击功能。

通常当用户点击它进入的文本区域时，占位符“关于你的一点点......”消失并且两个按钮出现在文本区域下方：“保存”和“取消”

点击前的文本区域：

点击后的文本区域：

我尝试了一切以编程方式执行该点击，但我就是无法让它工作。

更奇怪的是，添加一个 eventListener 来检查单击了哪个元素不会记录任何内容：

document.addEventListener('click', function(event) {
    console.log(event.target); 
}, true);

上面的代码适用于该网站上除文本区域之外的所有其他元素和按钮。

该元素没有 ID，所以我将其定位为：

var targetElement = document.getElementsByClassName('textarea__input')[1];

现在我尝试在该元素上调用

.focus()

和

.click()

但没有任何反应。

我什至尝试模拟人类点击：

var simulateMouseEvent = function (element, eventName, coordX, coordY) {
    element.dispatchEvent(new MouseEvent(eventName, {
        view: window,
        bubbles: true,
        cancelable: true,
        clientX: coordX,
        clientY: coordY,
        button: 0
    }));
};
var targetElement = document.getElementsByClassName('textarea__input')[1];
if (targetElement) {
        
        try {
            var box = targetElement.getBoundingClientRect(),
                coordX = box.left + (box.right - box.left) / 2,
                coordY = box.top + (box.bottom - box.top) / 2;

            simulateMouseEvent(targetElement, "mousedown", coordX, coordY);
            simulateMouseEvent(targetElement, "mouseup", coordX, coordY);
            simulateMouseEvent(targetElement, "click", coordX, coordY);
        } catch (error) {
            console.error("Error clicking text button:", error);
        }
    }

没有任何效果，如果我手动单击它，文本区域只会打开并显示“保存”和“取消”按钮。

为什么当我点击那个特定的文本区域时 eventListener 没有记录任何东西？

这是 HTML：

    <section class="settings-section is-opened" data-qa-role="settings-section-about">
   <header class="settings-section__header">
      <div class="settings-section__title" data-qa-role="settings-section-title">
         <h1 class="header-2"><span>About Me</span></h1>
      </div>
      <span class="settings-section__icon" role="presentation">
         <span class="icon icon--size-m settings-section__open-handler" role="presentation" data-qa-role="icon" data-qa-icon-name="generic-chevron-down">
            <svg data-origin="pipeline" viewBox="0 0 32 32" fill="none">
               <path fill-rule="evenodd" clip-rule="evenodd" d="M15.97 18.257l7.093-7.067a2.016 2.016 0 013.367.89c.188.691-.009 1.43-.516 1.937l-8.512 8.493a2.012 2.012 0 01-2.85 0l-8.513-8.493a1.994 1.994 0 01.049-2.778 2.013 2.013 0 012.788-.049l7.094 7.067z" fill="currentColor"></path>
            </svg>
         </span>
      </span>
   </header>
   <div class="settings-section__main" style="--settings-section-content-height:72px;">
      <div class="settings-section__content">
         <div class="settings-section__entry">
            <section class="settings-fieldset settings-fieldset--about" data-qa-role="about-fieldset">
               <div class="settings-fieldset__main">
                  <div class="settings-fieldset__field">
                     <div class="textarea has-autoheight has-placeholder" data-qa-role="profile-edit-about">
                        <div class="textarea__inner"><textarea class="textarea__input" placeholder="A little bit about you..." autocomplete="off" maxlength="300" dir="auto" style="height: 72px; min-height: 66px;">This is my teext</textarea><textarea class="textarea__ghost" aria-hidden="true" role="none"></textarea></div>
                     </div>
                  </div>
               </div>
            </section>
         </div>
      </div>
   </div>
</section>

更新 我想我发现了问题，该网站可以检测到它是由脚本触发的点击，而不是由真人触发的。 当我记录点击时：

const textarea = document.querySelector('.textarea__input');
textarea.addEventListener('click', event => {
  console.log('Click event triggered on textarea:', event);
});

这是我手动点击时得到的：

这就是我通过控制台调用 .click() 函数时得到的结果：

ChatGPT 说： isTrusted 属性设置为 false，表示该事件是由脚本而不是用户操作生成的。这是现代浏览器的一项安全功能，可防止恶意脚本在用户不知情或未同意的情况下模拟用户操作。

但我也准备好网站无法访问此“isTrusted”信息。 我可以做些什么来以编程方式触发与手动单击文本区域时相同的单击事件吗？

Answer 1

isTrusted 是只读属性，不能以编程方式设置。

https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted

尝试在 textArea 上使用 hasFocus()

https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus

Answer 2

我看到点击事件被触发，点击事件参数给出不同的值是否重要？您可以使用事件处理程序中的显示按钮和占位符文本更新逻辑来调用您的函数。您实际上还在寻找什么？