相关文章推荐
爽快的冲锋衣  ·  使用 Oracle JDeveloper ...·  7 月前    · 
近视的剪刀  ·  mysql ...·  1 年前    · 

我们想要给innerHTML里的标签绑定事件的话,我想到的办法就是利用事件委托的方法, 事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。

首先是我们要获得innerHTML里面的内容或者是给父元素绑定事件。

在下面的例子中比如 innerHTML中有一个img标签当我们点击img时console出他的属性


<div class="contain-style" [innerHTML]="msg.content" (click)="bigPic(msg.content)" > //将innerHTML值输出到div中
</div>

其次是事件处理函数

bigPic(msg,e){
e = e||window.event; //兼容IE8
let target = e.target||e.srcElement;  //判断目标事件
if(target.tagName.toLowerCase()=="img"){
console.log(target.src)
}
}

我们想要给innerHTML里的标签绑定事件的话,我想到的办法就是利用事件委托的方法,事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。首先是我们要获得innerHTML里面的内容或者是给父元素绑定事件。在下面的例子中比如 innerHTML中有一个img标签当我们点击img时console出他的属性      (click)="bigPic(msg.co
Vue innerHtml click 事件 vue项目中使用G6作为展示拓扑图的库 在使用tooltip时,想在tooltip中添加点击 事件 ,由于tooltip返回内容使用的是 innerHtml ,所以methods中的方法不能直接引用 解决方法如下: 标签 中使用click 事件 ,使用模板函数传参 // 事件 getContent: e => { const outDiv = document.createElement('div') outDiv.style.width = 'fit-cont
react项目中dangerouslySet InnerHTML 绑定 事件 项目需求:采用富文本编辑器编辑的一段字符串格式的html需进行显示,使用dangerouslySet InnerHTML 进行显示,但是这段HTML中包含img 标签 ,希望将这个img 标签 不要直接显示,而是处理成a 标签 ,点击时再进行图片显示,点击浏览器任意位置,图片不显示。 import React, {useState} from "react"; // reactstrap components import {Modal} fro
本篇文章中讲的是在js中动态添加/插入HTML代码块,并通过JQuery动态 绑定 点击 事件 。本篇文章是针对在写静态页面时需要时而更新部分列表代码,转而使用js来存储一个列表数据能方便更新列表数据而写的。 提示:以下是本篇文章正文内容,下面案例可供参考 一、场景需求还原 比如说,这里...
// vue 拼接js字符串 添加点击 事件 const station = ['a', 'b', 'c', 'd'] var infoWin1 = new T.InfoWindow() // var sContent = '<div>摄像头列表</div>' var arrname = '' station.forEach(item => { // sContent = '<div @οnclick=s