svg click event bug & css pointer-events

svg click event bug & css pointer-events

svg click event not working

Error

OK ???

css class

/* disabled svg click event */
/*
svg {
  pointer-events: none;
}
 */
/* enabled svg click event */
svg {
  pointer-events: all;
}

svg .selected-svg{
  stroke: #f00 !important;
  fill: #0f0 !important;
  stroke-width: 10 !important;
  stroke-linejoin: round;
  /* stroke-linejoin: bevel;
  stroke-linejoin: miter;
  stroke-linecap: round;
  stroke-linecap: butt;
  stroke-linecap: square; */
}

/* disabled svg click event */
/*
svg {
  pointer-events: none;
}
 */
/* enabled svg click event */
svg {
  pointer-events: all;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

pointer-events

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

svg

  cancelSelected(className = `selected-svg`) {
    // this.reverseColor();
    // this.setStyle(true);
    this.rect.classList.remove(className);
  }
  clickSelected(className = `selected-svg`) {
    // this.reverseColor();
    // this.setStyle();
    this.rect.classList.add(className);
  }
  setStyle(clear = false) {
    let style = "";
    if(!clear) {
      style = "stroke: red; stroke-width: 5;";
    }
    this.rect.setAttribute("style", style);
  }
  reverseColor() {
    const originColor = this.rect.getAttribute("fill");
    const color = `#` + originColor.slice(1).split("").reverse().join("");
    this.rect.setAttribute("fill", color);
  }

---

solution & dispatchEvent

https://www.cnblogs.com/xgqfrms/p/12315162.html

          const dom = window.svgPolygon[uuid];
          // why ? svg element not support trigger click event!
          // dom.click();
          dom.dispatchEvent(new Event('click'));

refs

---

---

©xgqfrms 2012-2020

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

---