获取鼠标点击位置的id 我现在的情况是这样的:我在body中有个div,id="main",然后在这个div上有个img,id="img1",之后在这个img1上动态画了几个div,id分别为div0,div1,div2等,我现在想实现的是,当鼠标点击div0,div1,div2时,能得到他们的id,可我用event.srcElement得到的是img的id“img1”。请问各位大侠,我怎样才能得到img上面div的id呢? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 你可以这样嘛 在每个div上面加上onclick=click(this),function click(obj){alert(obj.id);}就可以获取了 不过要在动态赋值div的时候要为<div id="+i+">这样就对了 之后在这个img1上动态画了几个div?图片上怎么画div,而且img好像不能包含div节点吧 <img scr="11112.jpg"><div id="div0">111</div><div>111</div><div>111</div></img>alert(event.srcElement.childNodes[0].id); 如果发现找到得元素是img,那就继续往上找,找img的父亲是谁?是不是div,如果你的div嵌套了其他div,那你得把你所需要的div加点特殊属性,以作区别。利用鼠标当前位置,获得当前元素,不是你需要的,就继续找元素的上一级。 <html> <head> <title>Rect</title> <style type="text/css"> </style> <script type="text/javascript"> var Rect = { //当前正在画的矩形对象 obj :null, //画布 container :null, //初始化函数 init : function(containerId) { tempstr=""; str=""; k=0;//记录矩形个数 Rect.container = document.getElementById(containerId); if (Rect.container) { //鼠标按下时开始画 Rect.container.onmousedown = Rect.start; } else { alert('You should specify a valid container!'); } }, start : function(e) { o = Rect.obj = document.createElement('div'); o.style.position = "absolute"; // mouseBeginX,mouseBeginY是辅助变量,记录下鼠标按下时的位置 o.style.left = o.mouseBeginX = Rect.getEvent(e).x; o.style.top = o.mouseBeginY = Rect.getEvent(e).y; o.style.height = document.getElementById('height').value; o.style.width = document.getElementById('width').value; o.style.border = "solid red 1px"; o.id = "div"+k; k++; Rect.container.appendChild(o); //处理onmouseup事件 Rect.container.onmouseup = Rect.end; }, end : function(e) { //onmouseup时释放onmousemove,onmouseup事件句柄 Rect.container.onmousemove = null; Rect.container.onmouseup = null; Rect.obj = null; tempstr=o.style.left+','+o.style.top+','+o.style.height+','+o.style.width+';'; str=str+tempstr; }, //辅助方法,处理IE和FF不同的事件模型 getEvent : function(e) { if (typeof e == 'undefined') { e = window.event; } //alert(e.x?e.x : e.layerX); if (typeof e.x == 'undefined') { e.x = e.layerX; } if (typeof e.y == 'undefined') { e.y = e.layerY; } return e; }, remove:function(e){ document.onclick = function(e){ var event = window.event || e; var ele = event.srcElement || event.target; alert(ele.id);//这里在点击显示在图片上的动态div(div0,div1等)时,得到是img的id“img1” }//end document }//end remove };//end rect</script> </head> <body> <div id="main" style="border: solid black 1px; height: 90%; width: 60%; curssor: default;"> <img id="img1" name="imageField" border=0 src="pic1.jpg" onload="javascript:if(this.width>screen.width-100)this.width=screen.width-100"> </div> <form name="thisform" method="post"> Width:<input type="text" size=10 value="" id="width"> Height:<input type="text" size=10 value="" id="height"> <input type=button value="Draw Rect" id="draw"> <input type="button" value="Remove" id="remove"> </form> </body> <script type="text/javascript"> document.getElementById('draw').onclick = function() { Rect.init("main"); } document.getElementById('remove').onclick = function() { Rect.container.onmousedown = null; Rect.remove(); };</script></html>以上是我的部分代码,不好意思,刚才说错了,不是在img上画div,而是在“main”上div,只是显示在了图片上面。 例如你给div添加一个属性 attr="abc",那么当你获得标签的时候判断一下当前标签的attr属性值是不是"abc",是的话就是你要的div 我现在的问题是,在id为“main“的div上动态画矩形div,这些矩形显示在了图片img1上(相当于矩形和图片叠加了),于是我点击这些矩形时得到的都是img1的属性,而不是矩形的,我怎么才能通过点击得到矩形的id呢? <html> <head> <title>Rect </title> <style> .d{background-color:red; /* 背景颜色 */filter:alpha(opacity=50); /* 如果仍想看到图片的话,用滤镜吧 */}</style> <script type="text/javascript"> var Rect = { //当前正在画的矩形对象 obj :null, //画布 container :null, //初始化函数 init : function(containerId) { tempstr=""; str=""; k=0;//记录矩形个数 Rect.container = document.getElementById(containerId); if (Rect.container) { //鼠标按下时开始画 Rect.container.onmousedown = Rect.start; } else { alert('You should specify a valid container!'); } }, start : function(e) { o = Rect.obj = document.createElement('div'); o.style.position = "absolute"; // mouseBeginX,mouseBeginY是辅助变量,记录下鼠标按下时的位置 o.style.left = o.mouseBeginX = Rect.getEvent(e).x; o.style.top = o.mouseBeginY = Rect.getEvent(e).y; o.style.height = document.getElementById('height').value; o.style.width = document.getElementById('width').value; o.style.border = "solid red 1px"; o.className = "d";o.id = "div"+k; k++; Rect.container.appendChild(o); //处理onmouseup事件 Rect.container.onmouseup = Rect.end; }, end : function(e) { //onmouseup时释放onmousemove,onmouseup事件句柄 Rect.container.onmousemove = null; Rect.container.onmouseup = null; Rect.obj = null; tempstr=o.style.left+','+o.style.top+','+o.style.height+','+o.style.width+';'; str=str+tempstr; }, //辅助方法,处理IE和FF不同的事件模型 getEvent : function(e) { if (typeof e == 'undefined') { e = window.event; } //alert(e.x?e.x : e.layerX); if (typeof e.x == 'undefined') { e.x = e.layerX; } if (typeof e.y == 'undefined') { e.y = e.layerY; } return e; }, remove:function(e){ document.getElementById("main").onclick = function(e){ var event = window.event || e; var ele = event.srcElement || event.target; alert(ele.id);//这里在点击显示在图片上的动态div(div0,div1等)时,得到是img的id“img1” }//end document }//end remove };//end rect </script> </head> <body> <div id="main" style="border: solid black 1px; height: 90%; width: 60%; curssor: default;"> <img id="img1" name="imageField" border=0 src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif" onload="javascript:if(this.width>screen.width-100)this.width=screen.width-100"> </div> <form name="thisform" method="post"> Width: <input type="text" size=10 value="" id="width"> Height: <input type="text" size=10 value="" id="height"> <input type=button value="Draw Rect" id="draw"> <input type="button" value="Remove" id="remove"> </form> </body> <script type="text/javascript"> document.getElementById('draw').onclick = function() { Rect.init("main"); } document.getElementById('remove').onclick = function() { Rect.container.onmousedown = null; Rect.remove(); }; </script> </html> jqgrid4--inline模式,如何根据服务器返回值判定数据是否保存 跪求高手修改下拉菜单鼠标悬停问题 jquery的treeview插件添加子节点的问题 太神奇了.按钮实现视频的缩放控制, 请这个怎么实现的? if语句? 首页 JS+图片 方式 实现幻灯翻转新闻 ??? 请问怎么让wx.ListCtrl列表首部不能移动?? 我的VML怎么显示不出来? js中jsp变量的引用问题,在线等! 请问怎样禁止使用 Ie浏览器中的某一项菜单 如: save 和 save as 同样的js在不同的服务器上会报错 js如何获得子元素的内容?
alert(event.srcElement.childNodes[0].id);
<head>
<title>Rect</title>
<style type="text/css">
</style>
<script type="text/javascript">
var Rect = {
//当前正在画的矩形对象
obj :null,
//画布
container :null,
//初始化函数
init : function(containerId) {
tempstr="";
str="";
k=0;//记录矩形个数
Rect.container = document.getElementById(containerId);
if (Rect.container) {
//鼠标按下时开始画
Rect.container.onmousedown = Rect.start;
} else {
alert('You should specify a valid container!');
}
},
start : function(e) {
o = Rect.obj = document.createElement('div');
o.style.position = "absolute";
// mouseBeginX,mouseBeginY是辅助变量,记录下鼠标按下时的位置
o.style.left = o.mouseBeginX = Rect.getEvent(e).x;
o.style.top = o.mouseBeginY = Rect.getEvent(e).y;
o.style.height = document.getElementById('height').value;
o.style.width = document.getElementById('width').value;
o.style.border = "solid red 1px";
o.id = "div"+k;
k++;
Rect.container.appendChild(o);
//处理onmouseup事件
Rect.container.onmouseup = Rect.end;
},
end : function(e) {
//onmouseup时释放onmousemove,onmouseup事件句柄
Rect.container.onmousemove = null;
Rect.container.onmouseup = null;
Rect.obj = null;
tempstr=o.style.left+','+o.style.top+','+o.style.height+','+o.style.width+';';
str=str+tempstr;
},
//辅助方法,处理IE和FF不同的事件模型
getEvent : function(e) {
if (typeof e == 'undefined') {
e = window.event;
}
//alert(e.x?e.x : e.layerX);
if (typeof e.x == 'undefined') {
e.x = e.layerX;
}
if (typeof e.y == 'undefined') {
e.y = e.layerY;
}
return e;
},
remove:function(e){
document.onclick = function(e){
var event = window.event || e;
var ele = event.srcElement || event.target;
alert(ele.id);//这里在点击显示在图片上的动态div(div0,div1等)时,得到是img的id“img1” }//end document
}//end remove
};//end rect
</script>
</head>
<body>
<div id="main"
style="border: solid black 1px; height: 90%; width: 60%; curssor: default;">
<img id="img1" name="imageField" border=0 src="pic1.jpg" onload="javascript:if(this.width>screen.width-100)this.width=screen.width-100">
</div>
<form name="thisform" method="post">
Width:<input type="text" size=10 value="" id="width">
Height:<input type="text" size=10 value="" id="height">
<input type=button value="Draw Rect" id="draw"> <input type="button" value="Remove" id="remove">
</form>
</body>
<script type="text/javascript">
document.getElementById('draw').onclick = function() {
Rect.init("main");
}
document.getElementById('remove').onclick = function() {
Rect.container.onmousedown = null;
Rect.remove();
};
</script>
</html>以上是我的部分代码,不好意思,刚才说错了,不是在img上画div,而是在“main”上div,只是显示在了图片上面。
例如你给div添加一个属性 attr="abc",
那么当你获得标签的时候判断一下当前标签的attr属性值是不是"abc",是的话就是你要的div
<html>
<head>
<title>Rect </title>
<style>
.d{
background-color:red; /* 背景颜色 */
filter:alpha(opacity=50); /* 如果仍想看到图片的话,用滤镜吧 */
}
</style>
<script type="text/javascript"> var Rect = {
//当前正在画的矩形对象
obj :null,
//画布
container :null, //初始化函数
init : function(containerId) {
tempstr="";
str="";
k=0;//记录矩形个数
Rect.container = document.getElementById(containerId);
if (Rect.container) {
//鼠标按下时开始画
Rect.container.onmousedown = Rect.start;
} else {
alert('You should specify a valid container!');
}
},
start : function(e) {
o = Rect.obj = document.createElement('div');
o.style.position = "absolute";
// mouseBeginX,mouseBeginY是辅助变量,记录下鼠标按下时的位置 o.style.left = o.mouseBeginX = Rect.getEvent(e).x;
o.style.top = o.mouseBeginY = Rect.getEvent(e).y;
o.style.height = document.getElementById('height').value;
o.style.width = document.getElementById('width').value;
o.style.border = "solid red 1px";
o.className = "d";
o.id = "div"+k;
k++;
Rect.container.appendChild(o);
//处理onmouseup事件
Rect.container.onmouseup = Rect.end;
},
end : function(e) {
//onmouseup时释放onmousemove,onmouseup事件句柄 Rect.container.onmousemove = null;
Rect.container.onmouseup = null;
Rect.obj = null;
tempstr=o.style.left+','+o.style.top+','+o.style.height+','+o.style.width+';';
str=str+tempstr;
},
//辅助方法,处理IE和FF不同的事件模型
getEvent : function(e) {
if (typeof e == 'undefined') {
e = window.event;
}
//alert(e.x?e.x : e.layerX);
if (typeof e.x == 'undefined') {
e.x = e.layerX;
}
if (typeof e.y == 'undefined') {
e.y = e.layerY;
}
return e;
},
remove:function(e){
document.getElementById("main").onclick = function(e){
var event = window.event || e;
var ele = event.srcElement || event.target;
alert(ele.id);//这里在点击显示在图片上的动态div(div0,div1等)时,得到是img的id“img1”
}//end document
}//end remove
};//end rect
</script>
</head>
<body>
<div id="main"
style="border: solid black 1px; height: 90%; width: 60%; curssor: default;">
<img id="img1" name="imageField" border=0 src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif" onload="javascript:if(this.width>screen.width-100)this.width=screen.width-100">
</div>
<form name="thisform" method="post">
Width: <input type="text" size=10 value="" id="width">
Height: <input type="text" size=10 value="" id="height">
<input type=button value="Draw Rect" id="draw"> <input type="button" value="Remove" id="remove">
</form>
</body>
<script type="text/javascript">
document.getElementById('draw').onclick = function() {
Rect.init("main");
}
document.getElementById('remove').onclick = function() {
Rect.container.onmousedown = null;
Rect.remove();
};
</script>
</html>