js trigger click event & dispatchEvent & svg element

but svg element not support trigger click event in js

dispatchEvent & click event

https://*.com/questions/49834459/programmatically-trigger-click-event-in-svg-rect-element

svg dom

// dom.click();

dom.dispatchEvent(new Event('click'));

OK

      deleteSVGData(`polygons`);

      window.svgPolygon = {};

      polygons.forEach((poly, i) => {

        const polygon = new PolygonConvert(poly, i, svg, this.svgEventBus);

        polygon.bindEvents();

        // const uuid = polygon.uuid;

        const uuid = polygon.getUuid();

        log(`polygon uuid`, polygon, polygon.uuid, poly.getAttribute(`uuid`), uuid);

        const arr = getSVGData(`polygons`) || [];

        arr.push(uuid);

        window.svgPolygon[uuid] = poly;

        // DOM Object stringify bug

        // arr.push({

        //   uuid: uuid,

        //   dom: poly,

        // });

        log(`arr`, arr);

        setSVGData(`polygons`, arr);

        setTimeout(() => {

          const arr = getSVGData(`polygons`) || [];

          const uuid = arr[0];

          log(`arr[0]`, arr[0], uuid);

          const dom = window.svgPolygon[uuid];

          // why ? svg element not support trigger click event!

          // dom.click();

          dom.dispatchEvent(new Event('click'));

        }, 3000)

        // this.lockEditor();

        // setTimeout(() => {

        //   polygon.scaleSize(1.5);

        // }, 3000);

        // setTimeout(() => {

        //   polygon.translatePoints(100, 100);

        // }, 3000);

      });

error

---

css pointer-events

maybe it's help

/* disabled svg click event */

svg {

  pointer-events: none;

}

/* enabled svg click event */

svg {

  pointer-events: all;

}

https://github.com/angular/protractor/issues/4495#issuecomment-586598840

https://www.smashingmagazine.com/2018/05/svg-interaction-pointer-events-property/

---

CustomEvent

let event = new CustomEvent(

    "newMessage",

    {

        detail: {

            message: "Hello World!",

            time: new Date(),

        },

        bubbles: true,

        cancelable: true

    }

);

// global html

document.querySelector(`:root`).dispatchEvent(event);

// document.querySelector(`html`).dispatchEvent(event);

// document.querySelector(`body`).dispatchEvent(event);

document.addEventListener("newMessage", newMessageHandler, false);

EventBus / EventEmitter

refs

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---