取得鼠标所在位置的Dom对象,并在该对象内插入1个DIV,该DIV位置跟鼠标位置一致 鼠标点击的时候,取得鼠标所在位置的Dom对象,并在该对象内插入1个DIV,该DIV位置跟鼠标位置一致,该DIV内写一个字"Good"最好各种浏览器都能兼容,要求不能在html里修改任何代码,直接在</body>前插入一个js,实现这个功能 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <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>这样试试 谢谢楼上支持,但有几个问题哈,比如http://baike.baidu.com/view/442490.htm把这个网页保存到本地,然后加入js运行,发觉(1)加的DIV跟鼠标不在同一位置(2)在表格里点一下会插入3个DIV还有个问题,假如如果本来有些元素有click事件的处理代码,楼上的代码会不会就把别的click事件全覆盖了,影响了网页本来的功能? 位置不对可能是因为没考虑滚动 你把浏览器的滚动位置加上试试看看行不行 至于覆盖原来的click 很显然覆盖了--! 哈 等高手来吧 我简单写一个 <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> 非常感谢!测试 http://baike.baidu.com/view/442490.htm后发觉楼上这个有两个问题(1)滚动后,位置不准(2)浏览器改变宽度后,插入的good字相对于网页内容飘逸了,没有跟网页融入一体,我希望的是插入的字随着网页一起动,就好象是 嵌在里面的,而不是漂在上面的 (1)滚动后,位置不准坐标加上 滚动坐标就可以 /******************** * 取窗口滚动条滚动高度 ******************/ function getScrollTop(){ return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;}; /******************** * 取窗口滚动条滚动高度 ******************/ function getScrollLeft(){ return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft ;}; var x=(e.x||e.pageX)+getScrollLeft(); var y=(e.y||e.pageY)+getScrollTop(); 关于头HTML文件的问题~~!!!! 这段代码在chrome不能执行,别的浏览器都可以 求起名字的周易打分算法. 请问文档 我的这段代码在FF 下无法执行 高手:我想window.open()打开一个窗口A,如何判做到如果A已经是打开的,就不用打开A,如果A没有打开,就打开它?? js怎么调出打开文件对话框,取得路径? 如何用easyui做一个论坛 有没有前端大神 解释一下 jquery datatable function里面的 a, b, c, d 是怎么赋值的 ajax请求数据,并怎么将数据赋值给全局变量 菜鸟请教关于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>
这样试试
http://baike.baidu.com/view/442490.htm把这个网页保存到本地,然后加入js运行,发觉
(1)加的DIV跟鼠标不在同一位置
(2)在表格里点一下会插入3个DIV还有个问题,假如如果本来有些元素有click事件的处理代码,楼上的代码会不会就把别的click事件全覆盖了,影响了网页本来的功能?
<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>
测试 http://baike.baidu.com/view/442490.htm
后
发觉楼上这个有两个问题
(1)滚动后,位置不准
(2)浏览器改变宽度后,插入的good字相对于网页内容飘逸了,没有跟网页融入一体,我希望的是插入的字随着网页一起动,就好象是 嵌在里面的,而不是漂在上面的
* 取窗口滚动条滚动高度
******************/
function getScrollTop()
{
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;
}; /********************
* 取窗口滚动条滚动高度
******************/
function getScrollLeft()
{
return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft ;
}; var x=(e.x||e.pageX)+getScrollLeft();
var y=(e.y||e.pageY)+getScrollTop();