svg click event bug & css pointer-events
2024-08-29 23:43:13
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 发布文章使用：只允许注册用户才可以访问！
最新文章
- Mac shell 添加VPN 路由
- leetcode4568
- mysql_connect和mysql_pconnect区别(转)
- Div高度百分比
- HomeSnap
- Java简单算法--求100以内素数
- 20160406javaweb JDBC 实例工具类
- Delphi 2007体验！
- 使用JS控制struts的日期控件datetimepicker
- 站点搭建从零開始（四） server的配置
- Objective-C中的面向对象编程
- Unity中的万能对象池
- Linux显示本地端的文件系统
- jsp EL表达式原样输出问题
- c#常用数值范围汇总
- 纯中文C++代码，可运行
- python读取wav文件并播放[pyaudio/wave]
- 按键排序JavaScript对象
- 浅谈java构建工具的选择
- Android 从相机或相册或获取图片（转）