js如何实现：在页面中任意位置点击鼠标，则在该位置显示一个div
1、先在一个文件目录下创建四个html文件，分别为index.html、page1.html、page2.html、page3.html。
2、接着用可编辑文本文件的软件打开四个html文件。如图先在index.html中加入三个div。
3、接着如图编写js代码，使得点击指定div后跳转指定页面。
4、其他三个html文件只是简单显示一下信息，三个文件的内容如图。
5、编辑完后，用浏览器打开index.html文件，结果如图。
6、点击第一个div，效果如图。
7、点击第二个div，效果如图。这样就成功用js实现点击指定div后跳转到指定页面了。
如何用javascript点击指定的位置
javascript是不能设置鼠标的坐标的。能得到坐标（clientX,clientY）这些都是只读属性，是不可写的。如果用JS去移动鼠标这违返了浏览器的安全原则。
可以用一些变通的方法，说下我用的方法（C#+webBrowser）：
添加 microsoft HTML lib那个引用。 在webbrowser控件里面加载一个窗体。页面加载完后，让那个页面x 100,y 100的坐标点的元素得到焦点。然后通过这个元素调用他的click方法（这是用JS调用的）。这样就可以了。
js获取鼠标点击事件的相对位置
html
head
title位置/title
script language=”javascript” type=”text/javascript”
function m(){
document.getElementById(“area”).innerHTML=event.clientX +” , “+event.clientY;
}
function c(){
var objTop = getOffsetTop(document.getElementById(“d”));//对象x位置
var objLeft = getOffsetLeft(document.getElementById(“d”));//对象y位置
var mouseX = event.clientX+document.body.scrollLeft;//鼠标x位置
var mouseY = event.clientY+document.body.scrollTop;//鼠标y位置
//计算点击的相对位置
var objX = mouseX-objLeft;
var objY = mouseY-objTop;
clickObjPosition = objX + “,” + objY;
alert(clickObjPosition);
}
function getOffsetTop(obj){
var tmp = obj.offsetTop;
var val = obj.offsetParent;
while(val != null){
tmp += val.offsetTop;
val = val.offsetParent;
}
return tmp;
}
function getOffsetLeft(obj){
var tmp = obj.offsetLeft;
var val = obj.offsetParent;
while(val != null){
tmp += val.offsetLeft;
val = val.offsetParent;
}
return tmp;
}
/script
/head
body style=”margin:0px;” onmousemove=”m();”
div style=”padding:90px;border:1px solid #ccc;font-size:36px;width:800px;height:800px;” /div
div id=”area”/div
div style=”width:1400px;height:300px;border:1px solid red;padding-left:1200px;”
div id=”d” style=”width:200px;height:200px;border:1px solid green;padding:10px;cursor:hand;” onclick=”c()”这里是图片，因为我用div边框1px，所以两个div会有2px的位置偏移，你可以自己调整/div
/div
/body
/html
现写的，你可以copy下来创建个html自己研究下，不难
JS如何模拟鼠标点击X,Y坐标
现在我有个窗口坐标X,Y. 如何利用JS点击该坐标?
遍历dom元素，记录每个元素的坐标，找到离(x,y)最近的且z-index最大一个元素，模拟这个dom元素的点击
其中，
initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值。此方法只能在通过dispatchEvent 方法指派 MouseEvent 之前调用，尽管在该阶段可以多次调用它（如有必要）。如果被多次调用，则最后一次调用优先。
参数：
document.createEvent用于创建事件，在DOM Level 2 的事件中就有HTMLEvents，MouseEvents，UIEvents事件类型。DOM Level 3增加很多事件类型，个人觉得其中最有用的是CustomEvent自定义事件。
有效的事件类型列表:
为DOM元素创建自定义事件的步骤为：
一、创建事件：var ev = document.createEvent(‘CustomEvent’);
二、初始化事件：ev.initCustomEvent(‘自定义事件名称’, false(是否允许冒泡), false(是否允许中断),args)
三、为DOM添加事件监听：element.addEventListener(‘自定义事件名称’,fn,false)
四、分发(触发)自定义事件：element.dispatchEvent(ev)
js点击元素光标不移动
当使用JavaScript点击元素，但光标不移动时，可能是因为没有正确设置光标位置。可以通过设置光标位置来解决这个问题，例如，可以使用JavaScript的selectionStart和selectionEnd属性来设置光标的位置。另外，也可以使用JavaScript的focus()方法来设置光标的位置，这样就可以让光标移动到指定的位置。此外，也可以使用CSS的cursor属性来设置光标的位置，这样就可以让光标移动到指定的位置。总之，只要正确设置光标位置，就可以解决JavaScript点击元素时光标不移动的问题。
微信扫一扫 
支付宝扫一扫 
