svg用$('parent').on('click','child',function(){console.log(1212);})时不起作用

最新推荐文章于 2024-06-04 20:10:33 发布
最新推荐文章于 2024-06-04 20:10:33 发布
阅读量529 收藏
点赞数
文章标签： svg图标 svg图标加点击事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sunny327/article/details/80428113
版权
今天在给svg图标绑定事件时，发现点击svg图标没反应，控制台也不报错。经过调试时发现给svg绑定事件时不起作用，给Svg图标外面再包裹一个i标签，把事件绑定到i标签时即可。
sunny327
关注
svg学习 路由跳转方式以及传（获取）参 路由获取参数 懒加载
qq_43944285的博客
06-27 924
懒加载 如何处理 打包出来的项目(首屏)加载过慢的问题 SPA应用: 单页应用程序, 所有的功能, 都在一个页面中, 如果第一次将所有的路由资源, 组件都加载了, 就会很慢!加载过慢 => 一次性加载了过多的资源, 一次性加载了过大的资源比如: 图片压缩: 使用 webp 格式的图片, 提升首页加载的速度CDN加速: 配置CDN加速, 加快资源的加载效率 (花钱)开启 gzip 压缩 (一般默认服务器开启的, 如果没开, 确实可能会很慢, 可以让后台开一下)…就是我们先设置图片的data-set属性（
前端框架-Vue.js语法
aming小老弟
10-11 508
父组件中的 handleUpdateChildValue 方法接收到参数后，将其设置为 childValue 变量的值，从而完成了子组件向父组件传递数据的过程。当我们需要对发布到线上的文件进行修改时，重新编译的文件名如果和之前版本的相同会引起浏览器无法识别而加载缓存文件的问题。注意： vue组件中的全部html都存在于一个块元素中，就是app.vue中的 id名字为app的div。Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。对状态的派生和缓存。
在vue中使用console.log无效的解决
11-20
webpack开发环境下，在vue中使用console.log无效，一直以为webpack出了问题。 使用window.console.log()就能够顺利在浏览器控制台输出了。 以及 在axios请求的回调中依旧无法输出使用window.console.log()/console.log(),先留坑吧。 补充知识：vue中 :style 与 :class 三元运算符使用 style三元表达式 {{m.txt}} class三元表达式 <i cla
$(function(){});里的方法无效问题
h254931252的博客
10-16 8520
$(function(){})已经是一个匿名函数了，在里面定义的函数已经是私有了，不能全局访问。把函数定义在全局，也就是function外面，这样外部才能调用。
html svg 点击事件失效_想做SVG但不会改代码？来用动画功能呀！
weixin_31474035的博客
12-27 523
嘿，胖友们大家好呀，我是小三儿最近这段时间，SVG推文大热，135编辑器也是新上架了数十款热门SVG样式，三儿的教程也是一波接着一波的出。为了让胖友们更快捷的对SVG样式进行设置，135编辑器也进行了一波大改动，在专业版菜单栏中增加了『动画』选项，我们目前所有的教程都是在『动画』菜单栏中进行设置的。那么问题来了，不少胖友对动画功能还是有点没搞懂，『动画』按钮到底在哪里？『动画』设置到底有...
console.log 不起作用
weixin_30645617的博客
08-13 1621
devtool console.log 突然不起作用了 转载于:https://www.cnblogs.com/wolbo/p/11346746.html
IE浏览器console.log()无效
一只小怪的笔记
01-23 1720
IE浏览器低版本没有console.log()，写了它的话js执行不下去， 在IE下没打开IE浏览器控制台的情况下是没有console对象的， 非要打印的话自己定义。 window.console = window.console || (function () { var c ={}; 　　 c.log = c.warn = c.debug = c.info = c.error
D3.js v6(最新)版本 组织树图:支持折叠，缩放,拖拽平移 ,自定义渲染 TSX和JS两种版本 复制直接可用 全网最新最全!!
qq_44621394的博客
04-27 1594
写在前面:查阅了数十篇D3文章,费事两天才有的成果! 各位老板拿走的时候记得点个赞哦~ js版本:复制直接使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .link { fill: #37592B; } .node circle {
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
fwdwqdwq的博客
03-07 3090
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
Vue3快速上手（三）
最新发布
A_fork的博客
06-04 1340
今天我要分享的是Vue3中pinia，组件通信，slot、Vue3中的其他API和新组件等相关知识，话不多说，赶紧上干货！！！
js split console.log() 不生效的原因之一
hello world
01-10 984
直接console.log()可能并不会显示列表，而是显示1,2,3这样的样式。 只要console.log(JSON.stringify())这样调用就可以显示[1,2,3]的格式了。
【vue_1】console.log没有反应
11-25 2724
上面这段代码的console.log一直打印不出来，发现可能是ElMessage的问题，ElMessage是已经封装好的函数。1、首先，将ElMessage删除，之后看控制台是否能够打印。很好，说明就是ElMessage的问题，在看一下报错的地方。插播一句：如何使用if-else 语句来处理逻辑？总结：多思考，多使用console.log。加上上面这句话就能正确运行了。要做一个权限不够的弹出消息框。哦，原来是忘记导入库了。
关于console.log()输出没效果的问题
m0_52952413的博客
11-06 6016
在平时和的开发中我们经常遇到console.log()没有效果，作为小白的我已经遇见不止一次了， 下面来总结一下。 第一种 在vue中我们通常无法输出data里的值，这种通常情况下只有一种那就是data写成date(这个错误小白会长犯哦！还好我不是小白????,补充一下date是日期的意思) 第二种 也就是浏览器不小心关闭了消息选项 谷歌的是这个： 火狐的是这个 这个错误让我一度认为是浏览器的错误 ...
Chrome浏览器console.log()失效【已解决】
一条咸鱼的blog
10-29 8366
问题 今天在集成第三方js代码的时候，要求把结果打印出来，然后很奇怪的问题来了，console.log()打印不出来???? 排查过程 1.浏览器控制台的显示级别是不是正确，是否存在过滤条件，都正常； 2.验证其他网站是否也有此问题，其他网站控制台正常； 3.重置浏览器控制台的设置，再次尝试，无效???? 4.这个时候有点怀疑是不是代码的问题，不过还是换了个浏览器试了下，火狐上也是如此，依旧无法打印 到这里那大概率就是代码有问题，全局搜索console.log，只有我自己写的那个 解决 上网搜了下什么代码会
Chrome浏览器console.log不输出
热门推荐
weixin_40441194的博客
06-13 1万+
Chrome浏览器console.log不输出 问题描述：使用chrome开发模式进行vue.js调试时，发现console.log()并没有在console中输出？ 可能1：可能Filter旁边的选项没有勾选default，勾选 即可。 可能2：Filter处没有清空；点击x清空即可。 可能3：不小心在console的文件运行提示处，按了右键隐藏了文件，导致script标签内的console.log()无法输出，右键重新显示即可。 ...
Chrome使用console.log打印无效【已解决】
weixin_47316183的博客
01-21 4413
试试可能会给你惊喜呢
为什么我的js function中的代码不起作用了？
Enjoy Life with Sun
06-28 7670
为什么我的js代码不起作用了？function { ... }中的代码无效，直接onClick＝" ... "又管用了，难道window.alert("")也会有错？挠了半天的脑袋，其实很有可能因为格式不对喔 type="text/JavaScript">     ...//--> &lt;!-- ...//--&gt;必须要有type="text/JavaScri
JS中使用console.log()方法，在浏览器控制台没有内容的几种解决办法！！！
nn8783的博客
01-24 8618
【代码】JS中使用console.log()方法，在浏览器控制台没有内容的几种解决办法！！！
svg的告诫
weixin_30235225的博客
09-12 385
转自：SVG Authoring Guidelines在这篇文章里，作者列出了出现在很多SVG作品中的坏习惯，这些都可能会造成一些兼容的问题，只是Adobe的SVG Viewer忽略了这些错误（非标准的东西）。现在SVG还在发展初期，希望大家不要像在写HTML的时候被IE养成坏习惯一样给Adobe SVG Viewer养成坏习惯。目前Adobe对SVG的支持还是未知数，如果大家希望自己的基于SVG...
<el-upload action :auto-upload="false" list-type="picture-card" :on-remove="handleRemove" :limit="1" :on-change="hansdleChange" ref="upload" > <i class="el-icon-plus"></i> <div slot="tip" class="el-upload__tip">只能上传SVG文件，且不超过8KB</div> </el-upload> hansdleChange(file, fileList) { let imgSize = Number(file.size / 1024); const isSVG = file.name.split(".")[1] === "svg"; if (!isSVG) { this.$refs.upload.clearFiles(); this.$message.error("上传图片只能是 SVG 格式!"); } else { if(imgSize>8){ this.$refs.upload.clearFiles(); this.$message.error("上传图片不能大于8KB!"); }else{ this.deviceForm.file = file; console.log(file); } // this.deviceForm.file = file; } },怎么把上传的svg变成一个48*48的svg再存储
07-14
可以使用 HTML5 的 Canvas 元素将上传的 SVG 图像重新绘制成指定尺寸的 SVG，并将其存储起来。以下是一个示例代码： ```javascript hansdleChange(file, fileList) { let imgSize = Number(file.size / 1024); const isSVG = file.name.split(".")[1] === "svg"; if (!isSVG) { this.$refs.upload.clearFiles(); this.$message.error("上传图片只能是 SVG 格式!"); } else { if(imgSize > 8){ this.$refs.upload.clearFiles(); this.$message.error("上传图片不能大于8KB!"); } else { const reader = new FileReader(); reader.onload = (e) => { const svgData = e.target.result; const img = new Image(); img.onload = () => { const canvas = document.createElement("canvas"); canvas.width = 48; canvas.height = 48; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, 48, 48); const resizedSvgData = canvas.toDataURL("image/svg+xml"); // 将 resizedSvgData 存储到你想要的位置 this.deviceForm.file = resizedSvgData; }; img.src = svgData; }; reader.readAsDataURL(file.raw); } } } ``` 上面的代码通过创建一个 FileReader 对象来读取上传的 SVG 文件，并将其转换为 data URL。然后，创建一个新的 Image 对象并加载该 data URL。接下来，创建一个 Canvas 元素并将其尺寸设置为目标尺寸（这里是48x48）。使用 Canvas 的 `drawImage` 方法将 SVG 图像绘制到 Canvas 上，并使用 `toDataURL` 方法将 Canvas 转换为 data URL。最后，将该 data URL 存储到你想要的位置（例如，`this.deviceForm.file`）。 注意：由于使用了 FileReader、Canvas 和 Image 对象，上述代码可能需要在浏览器环境中运行，而不是在纯粹的 JavaScript 环境中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值