正文

js trigger click event & dispatchEvent & svg element

IP云
IP云V管理员/7 阅读
07/23
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

js trigger click event & dispatchEvent & svg element

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

js trigger click event & dispatchEvent & svg element的更多相关文章

  1. svg click event bug & css pointer-events

    svg click event bug & css pointer-events svg click event not working Error OK ??? css class /* d ...

  2. nodejs phantom add click event

    page.evaluate( function() { // find element to send click to var element = document.querySelector( ' ...

  3. js & right click menu

    js & right click menu https://stackoverflow.com/questions/4909167/how-to-add-a-custom-right-clic ...

  4. Atitit vod click event design flow  视频点播系统点击事件文档

    Atitit vod click event design flow  视频点播系统点击事件文档 重构规划1 Click cate1 Click  mov4 重构规划 事件注册,与事件分发管理器分开 ...

  5. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  6. trigger()的event事件对象之坑

    问题引入,先贴一段有问题的代码,如果你对 trigger()  这个函数了解不透彻,还真看不出这段代码错在哪.完成的功能是样式转换器,想让页面在加载后自行触发点击事件隐藏三个按钮,但是效果如图并没有隐 ...

  7. 使用FastClick的同时造成元素上的trigger('click')无法触发的解决办法

    现象还原: 1. 初始化进入多规格卖场商详页的时候,chrome模拟器切换到安卓环境下,点击加入购物车,规格弹出页没有展示.而在PC和IOS模拟器下,可以弹出规格页 2. 点击加入购物车时,使用 $( ...

  8. trigger click 和 click 的区别？？

    trigger click 和 user click 有什么区别吗? 好像没有的.直到发现了这样一段代码. <button class="btn1">Button&lt ...

  9. js &amp&semi; right click menu &amp&semi; 鼠标滑词

    js & right click menu & 鼠标滑词 // 鼠标滑词 mouseSlipGetWords() { const getSelectionText = () => ...

随机推荐

  1. for循环每次取出一个字符（不是字节）

    python3.5 for循环每次取出一个字符(不是字节) #!/usr/bin/env python # -*- coding:utf-8 -*- my_str = "我是哈哈" ...

  2. ajax配合一般处理程序&lpar;&period;ashx&rpar;登录的一般写法

    前端: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&gt ...

  3. 设计模式之——单例模式&lpar;Singleton&rpar;的常见应用场景

    单例模式(Singleton)也叫单态模式,是设计模式中最为简单的一种模式,甚至有些模式大师都不称其为模式,称其为一种实现技巧,因为设计模式讲究对象之间的关系的抽象,而单例模式只有自己一个对象,也因此 ...

  4. Oracle内链接&plus;外连接详解

    inner join(内连接) 内连接也称为等同连接,返回的结果集是两个表中所有相匹配的数据,而舍弃不匹配的数据.也就是说,在这种查询中,DBMS只返回来自源表中的相关的行,即查询的结果表包含的两源表 ...

  5. css居中方式总结

    方法一: line-height <div class="vertical" style="width:200px;height:200px;border:2px ...

  6. 删除&OpenCurlyDoubleQuote;自豪的采用wordpress”

    网上的都是老一套了,方法不对. 听我的~ 先进入wordpress的安装目录,比如我的是:cd /www/wwwroot/www.yangnan.tk然后再进入,我的主题是twentyseventee ...

  7. SQL转化为MapReduce的过程

    转载:http://www.cnblogs.com/yaojingang/p/5446310.html 在了解了MapReduce实现SQL基本操作之后,我们来看看Hive是如何将SQL转化为MapR ...

  8. Autohotkey常用命令

    //输入密码#1::send test1234sleep 600send {enter}return //打开程序; win + t: open total cmd#t::IfWinNotExist ...

  9. element-ui Select 清空model，页面没有清空选中项的问题

    业务场景: 在dialog 每次打开时, 选择应用程序要初始化为空. 最初的做法为: 监听dialog的show状态,当show为false时,设置selectApp为空这样写时,虽然selectAp ...

  10. js中时间戳转换成时间格式

    js中时间戳转换成时间格式, // 时间戳转换成时间格式 var formatDate = function(date){ date = new Date(date); var y=date.getF ...