读书人

获得鼠标所在位置的Dom对象并在该对

发布时间: 2013-09-16 13:45:21 作者: rapoo

取得鼠标所在位置的Dom对象,并在该对象内插入1个DIV,该DIV位置跟鼠标位置一致
鼠标点击的时候,取得鼠标所在位置的Dom对象,并在该对象内插入1个DIV,该DIV位置跟鼠标位置一致,该DIV内写一个字"Good"
最好各种浏览器都能兼容,

要求不能在html里修改任何代码,

直接在</body>前插入一个js,实现这个功能
[解决办法]
<script type="text/javascript">
function init(){
var a=document.getElementsByTagName("*");
for(var i=0;i<a.length;i++){
a[i].onclick=add;
}
}
function add(e){
var k=e
[解决办法]
window.event;
var a=document.createElement("div");
var x=k.clientX;
var y=k.clientY;
a.style.position="absolute";
a.style.left=x;
a.style.top=y;
a.innerHTML="Good";
this.appendChild(a);
}
window.onload=init;
</script>
</head>

<body>
<div style="width:400px;height:200px;background-color:#F00;float:right"></div>
<div style="width:400px; height:200px; background-color:#F00"></div>
<div style="width:400px; height:200px; background-color:#F00;float:right"></div>
<input type="button">
<input type="text">
<textarea></textarea>
</body>
这样试试
[解决办法]
我简单写一个


<script type="text/javascript" src="jquery-1.6.4.min.js" ></script>
<script type="text/javascript" >
$(document).ready(function() {
$(this).click(function(e) {
$(e.target).append("<span class='span1'>[newspan]</span>");
});
})
</script>

如果要完善的话,要处理那些不能增加子元素的元素,比如input select hr 什么的,
而且对于可加子元素的节点,还应该创造textrange,以在光标位置处增加。


[解决办法]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html,body{width:100%;height:100%}
</style>
</head>
<body>
<div style="width:400px;height:200px;background-color:#F00;float:right">
<div></div>
</div>
<div style="width:400px; height:200px; background-color:#F00"></div>
<div style="width:400px; height:200px; background-color:#F00;float:right"></div>
<input type="button">
<input type="text">
<textarea></textarea>
</body>
<script>
window.onload=function(e){

bindEvent(document.body,'click',function(e){
e=e
[解决办法]
event;
var obj = e.srcElement
[解决办法]
e.target;
if(typeof(obj.innerHTML)=='string'){
var div=document.createElement("div");
var x=e.x
[解决办法]
e.pageX;
var y=e.y
[解决办法]
e.pageY;
div.style.cssText="position:absolute;left:"+x+"px;top:"+y+"px;";
div.innerHTML="Good";
document.body.appendChild(div);
}
});
};

function bindEvent(obj,evt,fun)
{
if(window.addEventListener){
obj.addEventListener(evt, function(e){ fun(e);},false);
}else{
obj.attachEvent('on'+evt,fun);
}
}

</script>
</html>




读书人网 >JavaScript

热点推荐