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 发布文章使用:只允许注册用户才可以访问!
svg click event bug & css pointer-events的更多相关文章
- shit mint-ui & navbar click event bug
shit mint-ui & navbar click event bug # Vue 2.0 npm install mint-ui -S // 引入全部组件 import Vue from ...
- js trigger click event & dispatchEvent & svg element
js trigger click event & dispatchEvent & svg element but svg element not support trigger cli ...
- vue stop event bug
vue stop event bug [Vue warn]: Error in v-on handler: "TypeError: e.prevntDefault is not a func ...
- button click event in jqxgrid jqwidgets
button click event in jqxgrid jqwidgets http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/p ...
- SVG namespace & preview bug
SVG namespace & preview bug error This XML file does not appear to have any style information as ...
- Atitit vod click event design flow 视频点播系统点击事件文档
Atitit vod click event design flow 视频点播系统点击事件文档 重构规划1 Click cate1 Click mov4 重构规划 事件注册,与事件分发管理器分开 ...
- 浏览器 Pointer Events
前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...
- nodejs phantom add click event
page.evaluate( function() { // find element to send click to var element = document.querySelector( ' ...
- click event not triggered on bootstrap modal
I am trying to catch the click event when save changes is pushed. For some reason i can't catch the ...
随机推荐
- URI与URL傻傻分不清楚?
前言 总所周知,缓存是解决Http1.1协议传输性能的问题中最主要的手段. 缓存既可以存在于浏览器上,也可以存在于服务器中. 而影响缓存的Http头部有很多,其中Cache-Control是比较重要的 ...
- Java并发包源码学习系列:阻塞队列实现之DelayQueue源码解析
目录 DelayQueue概述 类图及重要字段 Delayed接口 Delayed元素案例 构造器 put take first = null 有什么用 总结 参考阅读 系列传送门: Java并发包源 ...
- 网络流 - dinic + 当前弧优化【代码】
这是初学网络流的时候从<算法竞赛进阶指南>抄下来的一份代码,自己理解的也不是很透彻. 注意,边要从 \(1\) 开始计,不然直接 \(xor\) 运算的话取反边会直接炸掉. #includ ...
- 六:SpringBoot-集成Druid连接池,配置监控界面
SpringBoot-集成Druid连接池,配置监控界面 1.Druid连接池 1.1 Druid特点 2.SpringBoot整合Druid 2.1 引入核心依赖 2.2 数据源配置文件 2.3 核 ...
- 四:SpringBoot-定时任务和异步任务的使用方式
SpringBoot-定时任务和异步任务的使用方式 1.定时任务 2.同步和异步 3.定时器的使用 3.1 定时器执行规则注解 3.2 定义时间打印定时器 3.3 启动类开启定时器注解 4.异步任务 ...
- Javascript 基础知识整理
Javascript的作用 表单验证,减轻服务器压力 添加页面动画效果 动态更改页面内容 Ajax网络请求(异步加载数据) -它属于前端的核心,主要用来控制和重新调整DOM,通过修改DOM结构,从而达 ...
- Java——单例模式、多线程
单例模式 单例模式练习 单例模式的分类 懒汉式 懒汉式相关练习 饿汉式 饿汉式相关练习 线程安全 使用双重检测机制实现线程安全的懒汉式 使用静态内部类实现线程安全的单例模式 多线程 多线程的三种方式 ...
- C++基本之--静态成员函数和静态成员变量
#include <iostream> using namespace std; class Internet { public: Internet(char *name,char *ad ...
- cassandra权威指南读书笔记--读写数据
写cassandra除了轻量级事务,不支持别的事务.cassandra是追加写,写的速度非常快.cassandra还有hint日志,这个数据库总是可写的,而且单个列的写操作是原子的.hint并不是一定 ...
- Hive 中日志的存放位置
目前hive启动无法成功,想查看下hive的日志定位问题,但发现hive的安装目录下并没有hive的日志,后来经过在网上谷歌发现: Hive中的日志分为两种 系统日志,记录了hive的运行情况,错误状 ...