hover事件获取当前元素信息

SVG中使用 hover（）事件获取当前元素信息

svg结构部分

代码有点多，自己项目直接复制过来的，可以直接复制用

<svg width="1500" height="1500"><g id="svg1" x="651" y="150" width="120" height="80" type="baseType"typeG="deviceG" initx="651" inity="150" deviceTypeId="1" topX="711" topY="150" bottomX="711" bottomY="230"rightX="771" rightY="190" leftX="651" leftY="190"pathIdStr="path-52aeb3d8143581e0f75a76da1e205608,path-8149038c85fbea083ae8c2afe2e96c5d,path-91982c1130fb90e242a568e8983c2a2f,path-a431463fe7059fd8be7356aae7611136,path-ac4ca065868cb18b9158bf494ed10ec5,path-f3602ebfbb9774b1d6dc671d2a180be7"><rect id="EquipsW-35e5ce927d78ad75abd87e269226f01c" parentId="35e5ce927d78ad75abd87e269226f01c" width="120"height="40" x="651" y="150" topX="711" topY="150" bottomX="711" bottomY="190" leftX="651" leftY="170"rightX="771" rightY="170" stroke="#2f7dce" stroke-width="2" fill="#2C3040" fill-opacity="0.01"stroke-opacity="0.9" onmousedown="mousedown(event)"></rect><rect id="EquipsN-35e5ce927d78ad75abd87e269226f01c" parentId="35e5ce927d78ad75abd87e269226f01c" x="651"y="190" width="120" height="40" topX="711" topY="190" bottomX="711" bottomY="230" leftX="651"leftY="210" rightX="771" rightY="210" stroke="#2f7dce" stroke-width="2" fill="#2C3040"fill-opacity="0.01" stroke-opacity="0.9" onmousedown="mousedown(event)"></rect></g><g id="svg2" x="277" y="361" width="120" height="80" type="baseType" typeG="deviceG" initx="222" inity="517"deviceid="2" topX="337" topY="361" bottomX="337" bottomY="441" rightX="397" rightY="401" leftX="277"leftY="401" offsetXAtrr="55" offsetYAtrr="-156" style="transform: translate(55px, -156px);"><rect id="EquipsW-639a52a5eb525ff6821a0663201e415c" parentId="639a52a5eb525ff6821a0663201e415c" width="120"height="40" x="222" y="517" topX="282" topY="517" bottomX="282" bottomY="557" leftX="222" leftY="537"rightX="342" rightY="537" stroke="#2f7dce" stroke-width="2" fill="#2C3040" fill-opacity="0.01"stroke-opacity="0.9" onmousedown="mousedown(event)"></rect><rect id="EquipsN-639a52a5eb525ff6821a0663201e415c" parentId="639a52a5eb525ff6821a0663201e415c" x="222"y="557" width="120" height="40" topX="282" topY="557" bottomX="282" bottomY="597" leftX="222"leftY="577" rightX="342" rightY="577" stroke="#2f7dce" stroke-width="2" fill="#2C3040"fill-opacity="0.01" stroke-opacity="0.9" onmousedown="mousedown(event)"></rect></g></svg>

JS结构部分

 $("g").hover(function () {var id = $(this).attr("id");var x = $(this).attr("x");var y = $(this).attr("y");console.log(id, x, y);}, function () {// alert(321)});

效果如下：

鼠标悬停在svg图形上时，获取到了元素的 id 以及 x , y 值，打印出来了

hover事件获取当前元素信息相关推荐

Vue 点击事件获取当前元素
在开发中我们可能会使用单击事件去获取当前元素,这样就需要进行传参: 关键词: $event 在括号中输入这个关键词,然后在方法中就可以使用以下的方法去获取你当前所需要使用的元素 #当前点击的元素 e ...
WEB开发高德地图应用，初始加载，地图定位，层级变化控制，根据经纬度获取详细地址信息，点击事件以及地图自适应
1.前台html位置准备 <div id="Sharingrouter"> <div id="container" r ...
UIAutomatorViewer、Inspector获取元素信息
一.UIautomatorViewer 它是Android SDK的一个工具,如果安装了 Android SDK,就可以在cmd窗口直接输入uiautomatorviewer打开. 点击左上角的第二个 ...
web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型
web api: API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力 ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
iframe简单使用、获取iframe 、获取iframe 元素值、iframe获取父页面的信息
文章目录 1.iframe简单使用 2.获取iframe 3.获取iframe 元素值 4.iframe获取父页面的信息: 1.iframe简单使用 <iframe> 标签规定一个内联框架 ...
html中绑定hover事件,jQuery中多个元素的Hover事件解决方案
1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fu ...
Vue 获取DOM元素，给DOM增加事件的特殊情况
Vue 获取DOM元素 ,给DOM增加事件的特殊情况给标签绑定ref属性使用this.$refs.xxx 获取原生的jsDOM对象 ref属性值不能重名 Vue.component('subCom ...
selenium获取元素信息的常用方法
selenium获取标签内信息 selenium获取元素信息的常用方法 elem = driver.find_element_by_* #获取元素属性(textContent.innerHTML.ou ...
JavaScript 技术篇-通过代码获取dom元素绑定的监听事件，chrome浏览器查看js元素绑定的监听事件
> var a = document.querySelector("#su"); < undefined > getEventListeners(a); < ...

hover事件获取当前元素信息

SVG中使用 hover（）事件获取当前元素信息

svg结构部分

JS结构部分

效果如下：

hover事件获取当前元素信息相关推荐

最新文章

热门文章