1. 背景
以下のようにbutton要素にsvg要素が埋め込まれている場合のユーザのクリックの動作を再現したいです。
<button type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6873 7.69562C15.6641 7.645 15.1166 6.42937 13.9073 5.22C12.2891 3.60437 10.2498 2.75 7.99976 2.75C5.74976 2.75 3.71038 3.60437 2.09413 5.22C0.884757 6.42937 0.337257 7.645 0.312257 7.69562C0.269915 7.79162 0.248047 7.89539 0.248047 8.00031C0.248047 8.10523 0.269915 8.209 0.312257 8.305C0.335382 8.35625 0.882882 9.57125 2.09288 10.7806C3.71038 12.3963 5.74976 13.25 7.99976 13.25C10.2498 13.25 12.2891 12.3963 13.9048 10.7806C15.1148 9.57125 15.6623 8.35625 15.6854 8.305C15.728 8.20913 15.7502 8.10543 15.7505 8.00051C15.7509 7.89559 15.7293 7.79175 15.6873 7.69562ZM12.8085 9.75813C11.4666 11.0794 9.84913 11.75 7.99976 11.75C6.15038 11.75 4.53288 11.0794 3.19288 9.7575C2.6656 9.23577 2.21203 8.64447 1.84476 8C2.21214 7.35579 2.6657 6.76471 3.19288 6.24312C4.53351 4.92062 6.15038 4.25 7.99976 4.25C9.84913 4.25 11.466 4.92062 12.8066 6.24312C13.3339 6.76467 13.7874 7.35575 14.1548 8C13.7874 8.64443 13.3339 9.23572 12.8066 9.7575L12.8085 9.75813ZM7.99976 5.25C7.45586 5.25 6.92418 5.41128 6.47194 5.71346C6.0197 6.01563 5.66723 6.44512 5.45909 6.94762C5.25095 7.45012 5.19649 8.00305 5.3026 8.5365C5.40871 9.06995 5.67062 9.55995 6.05521 9.94454C6.43981 10.3291 6.92981 10.5911 7.46326 10.6972C7.99671 10.8033 8.54964 10.7488 9.05214 10.5407C9.55463 10.3325 9.98413 9.98005 10.2863 9.52782C10.5885 9.07558 10.7498 8.5439 10.7498 8C10.7489 7.27091 10.4589 6.57192 9.94339 6.05637C9.42784 5.54082 8.72885 5.25083 7.99976 5.25ZM7.99976 9.25C7.75253 9.25 7.51086 9.17669 7.3053 9.03934C7.09973 8.90199 6.93952 8.70676 6.84491 8.47835C6.7503 8.24995 6.72554 7.99861 6.77378 7.75614C6.82201 7.51366 6.94106 7.29093 7.11587 7.11612C7.29069 6.9413 7.51342 6.82225 7.7559 6.77402C7.99837 6.72579 8.2497 6.75054 8.47811 6.84515C8.70652 6.93976 8.90174 7.09998 9.03909 7.30554C9.17645 7.5111 9.24976 7.75277 9.24976 8C9.24976 8.33152 9.11806 8.64946 8.88364 8.88388C8.64922 9.1183 8.33128 9.25 7.99976 9.25Z" fill="white"></path>
</svg>表示</button>
しかしdocument.querySelector('svg').click();を実行するとTypeErrorになった為です。
2. svg要素でclick()が使えない理由
click()はHTMLElementにのみ定義される関数だからです。
SVGSVGElement
HTMLElement
┌───────┐ ┌───────────┐
│ │<-----│HTMLElement│ click()
│Element│ └───────────┘
│ │ ┌──────────┐ ┌──────────────────┐ ┌─────────────┐
└───────┘<-----│SVGElement│<----│SVGGraphicsElement│<----│SVGSVGElement│
└──────────┘ └──────────────────┘ └─────────────┘
3. 実現できる実装
const clickEvent = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window,
});
document.querySelector('button')!.querySelector('svg')!.dispatchEvent(clickEvent);
解説
MouseEvent
- MouseEventインターフェイスは、ポインティングデバイス (マウスなど) によるユーザーの操作によって発行されたイベントを表します。
例）click, dblclick, mouseup, mousedown
インスタンスプロパティ
- bubbles（Eventインタフェイスから継承）
論理値で、イベントが DOM を通してバブリングするかどうかを示します。 - cancelable（Eventインタフェイスから継承）
論理値で、イベントがキャンセル可能かを示します。 - view(UIEventから継承)
イベントが生成されたWindowProxyオブジェクトを返します。ブラウザでは、これはイベントが発生したWindowオブジェクトです。
4. 最後に
svg要素でclick()が使えなくて困りましたが、自分の知識の少なさを痛感しました。
引き続き精進します！