如何使用 querySelector 点击 svg？

问题描述

我正在尝试使用以下命令构建一个 chrome 扩展程序来单击网页上的 SVG，但它显示“单击”不是一个功能。

谁能给我一些指导来解决这个问题？

document.querySelector("div[class^='Submitchat__SubmitButton']").querySelector("svg > path(0)").click();

<form class="Submitchat__SubmitchatWrapper-kLTVjd ezNulO">

  <div id="PinToTop" style="display: none; border: groove; margin: 5px; padding: 5px;"></div>

  <div class="DefaultComments__DefaultCommentsWrapper-drohEF dbvkCO">

    <div class="Submitchat__TextAreaWrapperBox-ijaLYA uQa-DJ">
      <textarea data-track-category="Interaction_Comment" data-track-action="click" data-track-name="field_comment" class="Submitchat__TextAreaWrapper-cEDMAF joGtiU" style="height: 44px;"></textarea>
    </div>

    <div class="Submitchat__SubmitButton-kXYuum kSQpDq">
      <span class="isvg loaded Submitchat__SendMessageIcon-hzVurU lcJXRC">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M25.305 16.07L7.503 24.307a.802.802 0 01-1.111-.925l1.923-7.493h0L6.392 8.396a.8.8 0 011.111-.925l17.802 8.236a.2.2 0 010 .363zm-16.638-.181h16" fill="none" stroke="#28232D" stroke-linecap="round" stroke-width="1.5">
                    </path>
                </svg>
            </span>
    </div>
  </div>

</form>

解决方法

您无法真正点击 svg 路径，但这里有一个解决方案：

const pathElem = document.querySelector("div[class^='SubmitChat__SubmitButton'] svg > path")

pathElem.onclick = () => console.log("clicked")

pathElem.dispatchEvent(new Event("click"))
pathElem.dispatchEvent(new Event("click"))

<form class="SubmitChat__SubmitChatWrapper-kLTVjd ezNulO">
    <div id="PinToTop" style="display: none; border: groove; margin: 5px; padding: 5px;"></div>
    <div class="DefaultComments__DefaultCommentsWrapper-drohEF dbvkCO">
        <div class="SubmitChat__TextAreaWrapperBox-ijaLYA uQa-DJ">
        <textarea data-track-category="Interaction_Comment" data-track-action="click" data-track-name="field_comment"  class="SubmitChat__TextAreaWrapper-cEDMAF joGtiU" style="height: 44px;"></textarea>
        </div>
        <div class="SubmitChat__SubmitButton-kXYuum kSQpDq">
            <span class="isvg loaded SubmitChat__SendMessageIcon-hzVurU lcJXRC">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M25.305 16.07L7.503 24.307a.802.802 0 01-1.111-.925l1.923-7.493h0L6.392 8.396a.8.8 0 011.111-.925l17.802 8.236a.2.2 0 010 .363zm-16.638-.181h16" fill="none" stroke="#28232D" stroke-linecap="round" stroke-width="1.5">
                    </path>
                </svg>
            </span>
        </div>
  </div>
</form>

请注意，.click() 适用于 HTML，但不适用于 SVG 元素。 MDN

另请注意，您的案例中的点击事件处理程序可能不会侦听 path 元素，而是侦听 svg、div 或 span 标记。>