js trigger click event & dispatchEvent & svg element All In One

js trigger click event & dispatchEvent & svg element All In One

but svg element not support trigger click event in js

dispatchEvent & click event

https://stackoverflow.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/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---