js获取鼠标所在html元素的id和属性

js获取鼠标所在html元素的id和属性:


  
  
<div onclick="Get_srcElement()">   <div id="001" style="border:1px solid red;width:100%;height:500px"> <span id="node001">这是第1结点div001<span>     <div id="002" style="border:1px solid red;width:80%;height:300px"> <span id="node002">这是第2结点div002<span>       <div id="003" style="border:1px solid red;width:50%;height:200px"> <span id="node003">这是第3结点div003<span>       </div>       <div id="004" style="border:1px solid red;width:50%;height:200px"> <span id="node003">这是第3结点div004<span>       </div>     </div>   </div>   <script>   function Get_srcElement()   {   var srcElement=""   srcElement= srcElement + " \n" +  "event.srcElement.id : " + event.srcElement.id   srcElement= srcElement + " \n" +  "event.srcElement.children[0].tagName: " + event.srcElement.children[0].tagName   srcElement= srcElement + " \n" +  "event.srcElement.firstChild.id : " + event.srcElement.firstChild.id   srcElement= srcElement + " \n"+  "event.srcElement.lastChild.id : " + event.srcElement.lastChild.id   alert(srcElement)   }      </script>   </div>               <div id="div_001">       <form id="form_001">           <input type="button" id="button_001_id" name="button_001_Name" value="单击查看" class="button_001_Class" onclick="Get_srcElement2(this)">       </form>   </div>   <script>   function Get_srcElement2()   {   var srcElement=""   srcElement= srcElement + " \n" +  "event.srcElement.id : " + event.srcElement.id   srcElement= srcElement + " \n" +  "event.srcElement.tagName : " + event.srcElement.tagName   srcElement= srcElement + " \n" +  "event.srcElement.type : " + event.srcElement.type   srcElement= srcElement + " \n" +  "event.srcElement.value : " + event.srcElement.value   srcElement= srcElement + " \n" +  "event.srcElement.name : " + event.srcElement.name   srcElement= srcElement + " \n" +  "event.srcElement.className : " + event.srcElement.className   srcElement= srcElement + " \n" +  "event.srcElement.parentElement.id : " + event.srcElement.parentElement.id   srcElement= srcElement + " \n" +  "event.srcElement.getattribute : " + event.srcElement.getAttribute   alert(srcElement)   }      </script>  

目前不兼容火狐,参考下面代码进行修改看看可行否,我有时间再修改本篇日志。

function Get_srcElement(e)
{
ee=window.event||e;
 var tmpObj = ee.srcElement ||  ee.target; 
var srcElement = srcElement + " " +  "event.srcElement.id : " + tmpObj .id
alert(srcElement)
}

转载于:https://my.oschina.net/u/2345713/blog/526598

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这个可以通过JavaScript监听鼠标移动事件,并获取鼠标所在位置的文字,然后根据文字显示对应的图片。以下是一个简单的实现示例: HTML代码: ```html <p>这是一段文字,鼠标碰到“文字”两个字会显示一张图片。</p> <div id="image-container"></div> ``` CSS代码: ```css #image-container { display: none; position: absolute; top: 0; left: 0; } ``` JavaScript代码: ```javascript var text = "文字"; // 需要匹配的文字 var imgSrc = "path/to/image.jpg"; // 图片路径 var imgWidth = 200; // 图片宽度 var imgHeight = 200; // 图片高度 var container = document.getElementById("image-container"); document.addEventListener("mousemove", function(event) { var target = event.target; if (target.nodeName === "P" && target.innerText.includes(text)) { container.innerHTML = "<img src='" + imgSrc + "' width='" + imgWidth + "' height='" + imgHeight + "'>"; container.style.display = "block"; container.style.top = event.clientY + "px"; container.style.left = event.clientX + "px"; } else { container.style.display = "none"; } }); ``` 解释一下代码: 首先定义了需要匹配的文字、图片路径、图片宽高等变量。然后获取到图片容器的DOM元素,并监听整个页面的mousemove事件。在事件回调函数中,先判断鼠标所在的目标元素是否是p标签,且该标签内包含需要匹配的文字。如果是,则将图片容器的innerHTML设置为img标签,并根据鼠标位置设置图片容器的位置,并将其display属性设置为“block”。如果不是,则将图片容器的display属性设置为“none”,以隐藏图片容器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值