导航:首页 > 编程语言 > js判断鼠标位置

js判断鼠标位置

发布时间:2024-02-03 15:11:31

javascript 怎么判断鼠标拖动方向

原理就是通过比较鼠标的XY坐标来判断。我不知道有没有其他的方式了,就拿知道的来说。下面是实现代码
<script>
var lastX = null,
lastY = null;
window.onmousemove = function(event){
var curX = event.clientX,
curY = event.clientY,
direction = '';
// console.info(event);
// console.info(event.clientX);
// console.info(event.clientY);

// 初始化坐标
if(lastX == null || lastY == null){
lastX = curX;
lastY = curY;
return ;
}

if(curX > lastX){
direction += 'X右,';
}else if(curX < lastX){
direction += 'X左,';
}else{
direction += 'X居中,';
}

if(curY > lastY){
direction += 'Y上';
}else if(curY < lastY){
direction += 'Y下';
}else{
direction += 'Y居中';
}

lastX = curX;
lastY = curY;

console.info(direction);
document.body.innerText = direction;
}
</script>

js如何判断光标是否在某元素上

判断光标是否在某元素上可以在window监听onmouseenter(onmouseleave)或者onmouseover(onmouseout)给某变量赋值1(赋值0),那么变量为1则在元素上(0则不在元素上)
window.onmouseover = function () { isOn = 1};
window.onmouseout = function () { isOn = 0};
window中mouse相关事件补充:
onmousedown 鼠标按钮被按下 (和onmouseup组成了单击事件);
onmouseenter 当鼠标指针移动到元素上时触发 (只在进入后触发一次,不支持冒泡,子元素不触发);
onmouseleave 当鼠标指针移出元素时触发 (只在离开后触发一次,支持冒泡,子元素也可以触发);
onmousemove 鼠标被移动 (在元素内移动会一直触发);
onmouseover 鼠标移到某元素之上 (只在进入后触发一次,支持冒泡,子元素也可以触发);
onmouseout 鼠标从某元素移开 (只在离开后触发一次,支持冒泡,子元素也可以触发);
onmouseup 鼠标按键被松开;

⑶ js怎么区分出点击的是鼠标左键还是右键

可用event.button判断;当其值为‘2’时 点击了鼠标右键,0为鼠标左键,1为滑轮

以下为w3c js手册里给出的实例

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
var btnNum = event.button;
if (btnNum==2)
{
alert("您点击了鼠标右键!")
}
else if(btnNum==0)
{
alert("您点击了鼠标左键!")
}
else if(btnNum==1)
{
alert("您点击了鼠标中键!");
}
else
{
alert("您点击了" + btnNum+ "号键,我不能确定它的名称。");
}
}
</script>
</head>

<body onmousedown="whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
</body>

</html>

⑷ cocos2d-js有会的吗怎么监听鼠标和触摸事件

cc.eventManager.addListener(cc.EventListener.create({
event : cc.EventListener.MOUSE,
onMouseDown : function(event) {
var pos = event.getLocation(); //当前事件发生的光标位置
var target = event.getCurrentTarget(); //事件绑定的目标
//判断当前事件发生的位置是否在事件目标区域内
if( cc.rectContainsPoint(target.getBoundingBox(), pos) ) {
cc.log("Mouse Down");
return true;
}
return false;
},
onMouseUp : function(event) {
var pos = event.getLocation();
var target = event.getCurrentTarget();
if( cc.rectContainsPoint(target.getBoundingBox(), pos) ) {
cc.log("Mouse up");
return true;
}
return false;
}
}), playButton);。

⑸ js 判断鼠标在哪个对象范围内

这个可以利用 JS 的事件传递的特性,在body捕获到页面的所有的鼠标进入事件,并获取到触发事件的最底层的元素。这样你就知道鼠标当前处在那个元素中了。
例:

<div style="width:500px;height:500px;background:red;" id="redDiv">
<div style="width:400px;height:400px;background:yellow" id="yellowDiv">
<div style="width:300px;height:300px;background:blue" id="blueDiv">
</div>
</div>
</div>
<input type="text" id="msg" value=""/><!-- 显示结果的文本框 -->
<script>
var body = document.body;//找到页面body用于绑定,其实也可以绑定document
function addHandler(element,type,handler){//给页面元素添加事件的通用方法,不理解的可以死记硬背下。写法是固定的。
if(element.addEventListener){// !IE//非IE下用addEventListener给元素添加事件
element.addEventListener(type,handler,false);
} else if(element.attachEvent){// IE//IE下要用 attachEvent给元素添加事件
element.attachEvent('on'+type,handler);
} else {//DOM0级//都不支持的时候 就用这种方法 给元素添加事件
element['on'+type] = handler;
}
};
var msg = document.getElementById('msg');//为了看着方便,定义了一个文本框,用于显示鼠标当前所在位置的id
addHandler(body,'mouseover',function(event){
var event = event||window.event;
var target = event.target||event.srcElement;//找到真正触发事件的元素,
msg.value = target.id;//这里取了触发元素的id,并传递给 文本框 方便查看。//文本框的id也是能被捕获到的。
});
</script>

⑹ js 判断当前鼠标在哪个元素上

<html>
<hr/>
<divid="dd"style="background:red">12</div>
<divid="dd1"style="background:red">12</div>
<pid="2"style="background:red">12
123123
<p>12331</p>
<a>zzzzzz</a>
</p>
<hr/>
<script>
document.body.onmouseover=function(e){
e=e|制|window.event;
varnode=e.target||e.srcElement;
if(window._lastNode!=node){
console.log(node)
}

}
</script>
</html>

文字说明:如果你看不懂,你还是放弃吧。

阅读全文

与js判断鼠标位置相关的资料

热点内容
jsp中的session 浏览:621
压缩完了文件去哪里找 浏览:380
武装突袭3浩方联机版本 浏览:674
网络机顶盒移动网络 浏览:391
iphone手机百度云怎么保存到qq 浏览:148
数据库设计与实践读后感 浏览:112
js对象是什么 浏览:744
网页文件存pdf 浏览:567
文件夹正装 浏览:279
刚复制的文件找不到怎么办 浏览:724
试运行适用于哪些体系文件 浏览:987
ghost文件复制很慢 浏览:967
杰德原车导航升级 浏览:240
编程dest是什么意思 浏览:935
linux端口镜像 浏览:820
iphone5屏幕清尘 浏览:157
机顶盒密码怎么改 浏览:672
w7系统下载32位教程 浏览:618
pcb文件包括哪些内容 浏览:598
g00文件 浏览:607

友情链接