获取鼠标点击位置的id

lenqi 2010-01-07 09:48:33
我现在的情况是这样的：我在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呢？
...全文
648 15 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
史蒂芬__ 2010-01-07
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 lenqi 的回复:]
引用 5 楼 jol_boy 的回复:
如果发现找到得元素是img，那就继续往上找，找img的父亲是谁？是不是div，如果你的div嵌套了其他div，那你得把你所需要的div加点特殊属性，以作区别。利用鼠标当前位置，获得当前元素，不是你需要的，就继续找元素的上一级。

怎么加特殊属性呢，您能说具体点嘛？
[/Quote]

例如你给div添加一个属性 attr="abc"，
那么当你获得标签的时候判断一下当前标签的attr属性值是不是"abc"，是的话就是你要的div
zhyzdl 2010-01-07
  • 打赏
  • 举报
 回复
study
lenqi 2010-01-07
  • 打赏
  • 举报
 回复

lenqi 2010-01-07
  • 打赏
  • 举报
 回复
<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，只是显示在了图片上面。
lenqi 2010-01-07
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 jol_boy 的回复:]
如果发现找到得元素是img，那就继续往上找，找img的父亲是谁？是不是div，如果你的div嵌套了其他div，那你得把你所需要的div加点特殊属性，以作区别。利用鼠标当前位置，获得当前元素，不是你需要的，就继续找元素的上一级。
[/Quote]
怎么加特殊属性呢，您能说具体点嘛？
jol_boy 2010-01-07
  • 打赏
  • 举报
 回复
如果发现找到得元素是img，那就继续往上找，找img的父亲是谁？是不是div，如果你的div嵌套了其他div，那你得把你所需要的div加点特殊属性，以作区别。利用鼠标当前位置，获得当前元素，不是你需要的，就继续找元素的上一级。
烟雨鹏城 2010-01-07
  • 打赏
  • 举报
 回复
<img scr="11112.jpg"><div id="div0">111</div><div>111</div><div>111</div></img>


alert(event.srcElement.childNodes[0].id);

烟雨鹏城 2010-01-07
  • 打赏
  • 举报
 回复
之后在这个img1上动态画了几个div？

图片上怎么画div,而且img好像不能包含div节点吧
yzone 2010-01-07
  • 打赏
  • 举报
 回复
你可以这样嘛 在每个div上面加上onclick=click(this),function click(obj){alert(obj.id);}就可以获取了 不过要在动态赋值div的时候要为<div id="+i+">这样就对了
浪尖赏花 2010-01-07
  • 打赏
  • 举报
 回复
LZ可以把代码贴上来
lenqi 2010-01-07
  • 打赏
  • 举报
 回复
谢谢楼上的，我确实想看到图片。程序的功能之一就是在现有图片上画矩形。
浪尖赏花 2010-01-07
  • 打赏
  • 举报
 回复
当然LZ也可以将背景颜色换成其他的
比如白色
浪尖赏花 2010-01-07
  • 打赏
  • 举报
 回复

<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>
lenqi 2010-01-07
  • 打赏
  • 举报
 回复
我现在的问题是，在id为“main“的div上动态画矩形div，这些矩形显示在了图片img1上（相当于矩形和图片叠加了），于是我点击这些矩形时得到的都是img1的属性，而不是矩形的，我怎么才能通过点击得到矩形的id呢？
js获取鼠标点击位置坐标
js获取鼠标点击位置坐标
cesium获取点击内容信息_Cesium获取鼠标点击位置（PickPosition）
cesium学习了这么长时间，有时候写鼠标点击事件时，想获取鼠标点击点位置，发现情况很多。比如以下情形：1获取鼠标点的对应椭球面位置2获取加载地形后对应的经纬度和高程3获取倾斜摄影或模型点击处的坐标4获取点击处屏幕坐标......发现不同场景对坐标需要不一致，因此花费了一点时间，学习下cesium的鼠标点击位置的获取api接口，看了官方文档和对应的示例，我总结了cesium提供以下几种接口(可能还...
html获取鼠标的当前位置
html获取鼠标的当前位置 1.相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX，screenY获取的是点击位置相对于屏幕的左边距与上边距，不考虑iframe因素，不同游览器下表现的还算一致。 function getMousePos(event) { var e = event || window.event; return {'x':e.screenX,'y':screenY} } 2.相对于游览器窗口 简单代码即可实现，然而这时还
Vue 获取鼠标位置坐标
Vue 获取鼠标位置坐标 在Vue项目中，我们可能有获取鼠标信息的需求来处理业务逻辑。 介绍 下面，我们将通过介绍touch事件，来获取鼠标位置。 事件名 功能 touchstart 鼠标点击时，触发该事件一次。 touchmove 当鼠标移动时，会多次调用该事件。 touchend 当鼠标停止移动时，触发该事件一次。 templ...
获取鼠标点击元素的id
该功能主要通过clickedId（）实现，可以将该函数封装起来，以便下次使用。 代码执行结果为将红色div变成黑色 上代码！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> ...
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章