导航:首页 > 编程语言 > 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判断鼠标位置相关的资料

热点内容
苹果6qq录音文件听不了 浏览:6
网络线怎么拔 浏览:328
webclip文件有什么危害 浏览:700
创维32e360e怎么看网络电视 浏览:824
js网站加载动画 浏览:411
shelljava 浏览:666
系统文件被删可以还原吗 浏览:835
万方等网站怎么下载 浏览:857
为什么电脑文件显示是写字板 浏览:37
百度网盘打卡压缩文件 浏览:925
英语怎么读的网站 浏览:115
怎么远程改电脑开机密码 浏览:501
可以直接打开压缩文件的浏览器 浏览:654
qq相册一个文件可以存多少张照片 浏览:894
淘宝升级是不是免费的 浏览:819
西安万利网络科技有限公司怎么样 浏览:125
段位只是一个数据多少人吵散了 浏览:722
双网卡上不同网络 浏览:94
拳皇game怎么打压缩文件 浏览:748
有哪些两级配送物流网络 浏览:8

友情链接