js获取鼠标所在html元素的id和属性-白红宇

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

阅读量：654 次

发布时间：2019-03-15

本文共 2218 字，大约阅读时间需要 7 分钟。

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

Code:

<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)

}

转载地址：http://zjcmz.baihongyu.com/

你可能感兴趣的文章

Mysql学习总结（71）——数据库介绍（MySQL安装体系结构、基本管理）再回顾

查看>>

Mysql学习总结（72）——MySQL 开发者开发，设计规范再总结

查看>>

Mysql学习总结（73）——MySQL 查询A表存在B表不存在的数据SQL总结

查看>>

Mysql学习总结（74）——慢SQL！压垮团队的最后一根稻草！

查看>>

Mysql学习总结（75）——并发量大、数据量大的互联网业务数据库设计军规

查看>>

Mysql学习总结（76）——MySQL执行计划（explain）结果含义总结

查看>>

Mysql学习总结（77）——温故Mysql数据库开发核心原则与规范

查看>>

Mysql学习总结（78）——MySQL各版本差异整理

查看>>

Mysql学习总结（79）——MySQL常用函数总结

查看>>

Mysql学习总结（7）——MySql索引原理与使用大全

查看>>

Mysql学习总结（80）——统计数据库的总记录数和库中各个表的数据量

查看>>

Mysql学习总结（81）——为什么MySQL不推荐使用uuid或者雪花id作为主键？

查看>>

Mysql学习总结（82）——MySQL逻辑删除与数据库唯一性约束如何解决？

查看>>

Mysql学习总结（83）——常用的几种分布式锁：ZK分布式锁、Redis分布式锁、数据库分布式锁、基于JDK的分布式锁方案对比总结

查看>>

Mysql学习总结（84）—— Mysql的主从复制延迟问题总结

查看>>

Mysql学习总结（85）——开发人员最应该明白的数据库设计原则

查看>>

Mysql学习总结（8）——MySql基本查询、连接查询、子查询、正则表达查询讲解

查看>>

Mysql学习总结（9）——MySql视图原理讲解与使用大全

查看>>

Mysql学习笔记 - 在Centos7环境下离线安装Mysql

查看>>

MySQL学习笔记十七：复制特性

查看>>