问题情况：

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. 评CSDN上一篇讲述数据迁移的文章“程序员 12 小时惊魂记：凌晨迁移数据出大事故！”

    原文地址:https://blog.csdn.net/csdnnews/article/details/98476886 我的评论:热数据迁移,本不该搞突击,这样一旦出现问题后果不堪设想,多少DBA和 ...

  2. JAVA记事本的图形用户界面应用程序含过滤

    JAVA记事本的图形用户界面应用程序 过滤 题目简介: 整体分析: 实验代码: package note; import java.awt.EventQueue; import java.awt.ev ...

  3. mssql表分区

    1:表分区 什么是表分区一般情况下,我们建立数据库表时,表数据都存放在一个文件里.但是如果是分区表的话,表数据就会按照你指定的规则分放到不同的文件里,把一个大的数据文件拆分为多个小文件,还可以把这些小 ...

  4. nhibernate Stuty

    https://blog.csdn.net/u010371458/article/details/8995166 翻译版 https://wenku.baidu.com/view/46fa56cea1 ...

  5. Winform非UI线程更新UI界面的各种方法小结

    我们知道只有UI线程才能更新UI界面,其他线程访问UI控件被认为是非法的.但是我们在进行异步操作时,经常需要将异步执行的进度报告给用户,让用户知道任务的进度,不至于让用户误认为程序“死掉了”,特别是对 ...

  6. 【MFC】BitBlt详解

    设备上下文绘图有很多种方法.例如通过创建位图画刷,利用其填充一个区域来实现图像的绘制.此外,还可以使用CDC类的位图函数来输出位图到设备上下文中. BitBlt 用于从原设备中复制位图到目标设备,语法 ...

  7. go使用go-redis操作redis 连接类型，pipline， 发布订阅

    内容: 一 . 客户端Client(普通模式,主从模式,哨兵模式)二. conn连接(连接, pipline, 发布订阅等)三. 示例程序(连接, pipline, 发布订阅等)客户端Client 普 ...

  8. C#编程 线程，任务和同步(1) 基础认识

    线程 对于所有需要等待的操作,例如移动文件,数据库和网络访问都需要一定的时间,此时就可以启动一个新的线程,同时完成其他任务.一个进程的多个线程可以同时运行在不同的CPU上或多核CPU的不同内核上. 线 ...

  9. 在vue中后台返回的文本包含标签时候解析为html代码

    1.数据格式: str=‘<p>11111</p>' 解析方式一: <p v-html="str">{{str}}</p> 解析方式 ...

  10. 用grok拆分java日志

    1.假设一行日志内容如下: [root@VM_0_92_centos opt]# cat error.log -- ::,[ERROR ajp-nio--exec-](cn.com.al1.compo ...