问题情况：

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. 前世今生：Hive、Shark、spark SQL

    Hive (http://en.wikipedia.org/wiki/Apache_Hive )(非严格的原文顺序翻译)  Apache Hive是一个构建在Hadoop上的数据仓库框架,它提供数据的 ...

  2. Android studio 自动导入(全部)包 import （转）

    原文: https://blog.csdn.net/buaaroid/article/details/44979629 1.      Android studio 只有import单个包的快捷键:A ...

  3. Java Web开发中路径问题小结（getRequestUrl getContextUrl getServletUrl)

    看以博客感觉不错,分享一下http://www.cnblogs.com/tianguook/archive/2012/08/31/2665755.html (1) Web开发中路径的几个基本概念 假设 ...

  4. JAVA VUser

    JAVA VUser 一.java虚拟用户协议 java虚拟用户脚本主要有Java Vuser.Corba-Java.RMI-Java.EJB等类型.这些类型的虚拟用户脚本均可以用java语言来手工编 ...

  5. Centos 在线安装 nginx

    centos 在线安装 nginx 安装nginx ​ 参考文档: http://nginx.org/en/linux_packages.html 中的RHEL/CentOS章节,按照步骤安装repo ...

  6. Head First HTML 与 CSS 学习笔记

    总的来说,这本书作为入门HTML和CSS还是不错的,讲解生动有趣,这也是Head First系列书籍的特点.缺点就是讲解的不够全面~ 第三章 一般来讲,如果要引用一段或者多段文字, 就要使用<b ...

  7. CSS练习-导航栏斜线分隔-利用伪元素

    开始切第一张图了,第一个遇到的问题是顶部导航栏这里,用斜线分割.想到的思路是用伪类:before或者:after实现 先写html结构. <!-- 导航栏begin --> <div ...

  8. Centos7永久关闭防火墙

    Centos7永久关闭防火墙 查看防火墙状态: systemctl status firewalld.service 绿的running表示防火墙开启 执行关闭命令: systemctl stop f ...

  9. 【AMAD】python-magic -- libmagic的python封装

    简介 动机 作用 用法 个人评分 简介 libmagic的python封装 动机 封装libmagic,使用python代码获取文件类型. 作用 libmagic通过文件头部,来确定文件的类型. 用法 ...

  10. TensorFlow实战第七课（dropout解决overfitting）

    Dropout 解决 overfitting overfitting也被称为过度学习,过度拟合.他是机器学习中常见的问题. 图中的黑色曲线是正常模型,绿色曲线就是overfitting模型.尽管绿色曲 ...