问题情况：

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. Java-AESUtil

    在线版 http://tool.chacuo.net/cryptaes 要使用 AES/CBC/PKCS7Padding 模式需要添加依赖 <!--AES/CBC/PKCS7Padding--& ...

  2. nginx的请求限制

    一.http协议的连接与请求 总结: HTTP请求是建立在一次TCP连接的基础之上. 一次TCP请求至少产生一次HTTP请求. 二.连接限制 limit_conn_module 配置语法: Synta ...

  3. OpenCV学习笔记(15)——更多的轮廓函数

    凸缺陷,以及如何找到凸缺陷 找某一点到一个多边形的最短距离 不同形状的匹配 1.凸缺陷 前面已经设计了轮廓的凸包和凸性缺陷的概念.OpenCV中有一个函数cv2.convexityDefect()可以 ...

  4. Appium移动自动化测试(五)之应用操作

    实验简介 对于APP测试来讲, 除了进行功能测试以外, 安装和卸载其实也是一个很重要的测试项. 试想, 如果用脚本来实现了, 可以事先判断该应用是否已安装, 根据判断结果来执行安装和卸载的动作, 循环 ...

  5. spring整合mybatis（代理的方式）【我】

    创建项目等同上一篇非代理方式随笔,只说不一样的部分: 项目结构主要是多了下面红框部分: 配置文件: 主要是dao配置文件中多了Mapper代理java类的扫描包路径: applicationConte ...

  6. EL表达式与JSTL标签库（二）

    1.JSTL标签库 标签库 作用 URI 前缀 核心 包含Web应用的常见工作,如循环.输入输出等 http://java.sun.com/jsp/jstl/core c 国际化 语言区域.消息.数字 ...

  7. debain安装文泉驿字体

    sudo apt-get install ttf-wqy-microhei sudo apt-get install ttf-wqy-zenhei

  8. Python爬虫学习==>第六章：爬虫的基本原理

    学习目的: 掌握爬虫相关的基本概念 正式步骤 Step1:什么是爬虫 请求网站并提取数据的自动化程序 Step2:爬虫的基本流程 Step3:Request和Response 1.request 2. ...

  9. python matplotlib 多图像排列显示

    用OpenCV和matplotlib实现多图排列,代码如下: import cv2 import matplotlib.pyplot as plt img = cv2.imread('C:\\User ...

  10. 【AMAD】transitions -- 一个python实现的轻量级，面向对象的有限状态机

    简介 个人评分 简介 Transitions1是使用python实现的有限状态机2. 而有限状态机是实现经典模式 -- 状态模式3的前提. 这个库的API相当优雅,简洁. 另外博客园有人发布博客4介绍 ...