问题情况：

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. 设计模式--观察者模式--python

    观察者模式: 对象间的一种一对多的依赖关系,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新. 主要解决: 当一个抽象模型有两个方面, 其中一个方面依赖于另一方面.将这二者封装在 ...

  2. 搭建Java服务器，并且实现远程安全访问linux系统

    1.通过ssh实现安全远程访问linux系统        ssh :secure shell         加密:       1. 对称加密 (加密密钥与解密密钥相同)          des ...

  3. 远程发送文件失败（scp）

    出现这种情况的原因是之前保存过192.168.210.134的密钥. 碰到这种情况进行如下操作: ①查看隐藏文件 [root@localhost ~]# ls -a    .ssh ②切换到 .ssh ...

  4. mariadb数据库（3）连接查询，视图，事务，索引，外键（优化）

    --创建学生表 create table students ( id int unsigned not null auto_increment primary key, name varchar(20 ...

  5. sh脚本实战

    做了什么东西还是要尽快移动到博客上,不然回头看自己写的东西已经看不懂了... 凭着回忆+搜资料,把当初写sh脚本的过程写上来. 首先新建一个.sh文件,用vim就可以 在sh的第一行,写上 #!/bi ...

  6. 聊聊GO-REDIS的一些高级用法

    1. 前言 说到Golang的Redis库,用到最多的恐怕是redigo 和 go-redis.其中 redigo 不支持对集群的访问.本文想聊聊go-redis 2个高级用法 2. 开启对Clust ...

  7. CTF—攻防练习之HTTP—目录遍历

    主机:192.168.32.152 靶机:192.168.32.163 目录遍历攻击又称(目录爬升,目录回溯,点-点斜线),指再访问存储在web根文件之夹外的文件和目录,通过操控带有"点-斜 ...

  8. springboot 多线程的使用

    int pageSize = 10000; int totalCount = doctorDAO.selectDatasByMapCount2(jsonArray, false, null); int ...

  9. OpenCV-Python画直方图和累积直方图

    代码如下: import cv2 import numpy as np import matplotlib.pyplot as plt img = cv2.imread('C:\\Users\\adm ...

  10. Unity* 实体组件系统 (ECS)、C# 作业系统和突发编译器入门

    Unity* 中的全新 C# 作业系统和实体组件系统不仅可以让您轻松利用以前未使用的 CPU 资源,还可以帮助您更高效地运行所有游戏代码.然后,您可以使用这些额外的 CPU 资源来添加更多场景动态和沉 ...