问题情况：

vue项目中，使用svg图标，为svg图标绑定click事件，部分浏览器中点击没有反应，代码如下：

<icon name="icon_add"  @click="addSubject(scope.$index)"> </icon>

原因：在edge内核中只有点击svg边缘部分才会触发click事件

解决办法：为svg图标外面包裹一层元素，click事件绑定在外侧元素上，修改如下：

<a href='javascript:;' @click="addSubject(scope.$index)">

    <icon name="icon_add">

    </icon>

</a>

vue中，svg图标添加click事件，部分浏览器不生效的更多相关文章

  1. vue中svg图标使用

    在前端开发中,经常会用到svg图标,在vue开发的中,经常会借助一些第三方插件,经常用的有vue-svg-icon,基本使用步骤为: 1.安装插件(会提示没有安装xml-loader,只需要安装下xm ...

  2. DEV中svg图标的使用

    0.开始之前 先看看使用效果 在操作栏的使用: 在菜单中的使用 1.简述SVG图标 中文名:可缩放矢量图形 外文名:Scalable Vector Graphics 外语缩写:SVG 开发商:万维网联 ...

  3. 【转】HTML中A标签与click事件的前世今生

    在动态网页中,常常需要在单击超链接时处理一些数据,而不是跳转一个网页.在这种情况下,通常有以下三种处理方式: 不设置<a>标签的href属性,只设置onclick属性.在这种处理方式下,通 ...

  4. EasyUi中的datagird中a标签的click事件无法触发？（已解决）

    ***************************2015-10-29 21:07************************* 问题如下: datagrid最后一列编辑中有如下a标签 { f ...

  5. 用js给循环的列表添加click事件

    纠结了两天终于搞定了,首先id这个东西必不可少,这个时候不能用onclik事件,而是需要使用代理事件. 比如说,这里有个列表如下: <ul> <li></li> & ...

  6. Vue根据条件添加 click 事件

    方式一:在绑定事件中直接添加标示量clickFlag <div @click="clickFlag && addGoodsHandler()"> XXX ...

  7. vue 中给组建绑定原生事件@click.native=""

    <template>     <div class="div">  //组建使用          <v-header @click.native=& ...

  8. vue中给window添加滚动监听无效的解决方案

    原文链接: 点我 页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作.我相信不少网友查阅过类似的资料,网友给出的解决方案, ...

  9. Silverlight中文本框添加回车事件后，换行无法清除的解决方法

    在开发Silverlight的项目中,为了更好的用户体验,我们常要给一些控件添加一些快捷键.然而,在Silverlight中当用户回车提交后,光标停留在文本框的第二行怎么也清除不掉,经过一段时间研究, ...

随机推荐

  1. 通过ID获取元素

    网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人.那么在网页中,我们通过id先找到标签,然后进行操作. 语法: document ...

  2. postman提交数组格式方式

    提交数组格式数据,对应的服务器端接收的是@RequestBody 和对应的接收值

  3. 如何解决使用 JMeter 时遇到的问题

    这是对 JMeter 官方网站上一篇文章的翻译.点击这里可以访问原文JMeterTroubleShooting. • check the log file. This is normally in t ...

  4. c++ STL之unordered_set

    unordered_set的特点: 自身值就是主键,所以值唯一并且不可修改 基于hash表的无序排列 unordered_set基于哈希表,是无序的. 在一个 unordered_set 容器中,元素 ...

  5. MySQL乱码的原因和设置UTF8数据格式

    https://segmentfault.com/a/1190000018662023 MySQL使用时,有一件很痛苦的事情肯定是结果乱码.将编码格式都设置为UTF8可以解决这个问题,我们今天来说下为 ...

  6. 【经验分享】Mongodb操作类实现CRUD

    一.背景 公司项目中在做数据存储时使用到Mongodb,所以想着将Mongodb的操作封装后可供项目中其他成员方便使用. 附上Mongodb的下载地址: 下载 1.Mongodb类 此类主要是用来构造 ...

  7. .net core cookie滑动过期设置

    HttpContext.SignInAsync( CookieAuthenticationDefaults.AuthenticationScheme, userPrincipal, new Authe ...

  8. 【学习笔记】python3中csv文件使用

    1. reader=csv.reader(f, delimiter=','):按行读取数据,reader为生成器,读取的每行数据为列表格式,可以通过delimiter参数指定分隔符. import c ...

  9. Ubuntu下借助URLOS实现快速安装DzzOffice企业办公套件

    如今,越来越多的个人.团队甚至企业都在使用GSuite或者Office365等网络办公套件,为什么人们越来越喜爱使用网络办公套件?一方面是考虑数字资产的安全性以及管理效率,另一方面则是日益增大的协同办 ...

  10. 1 初识数据库操作 2 JDBC 入门

    1 JDBC:Java Database Connectivity(Java 数据库连接) 1.1 JDBC 入门程序 注册驱动:Class.forName("com.mysql.cj.jd ...