获取鼠标在网页上的位置以及右击事件

js写法
document.getElementById("youji").oncontextmenu=youjiEvent;//指定这个元素 给他绑定右击事件
function youjiEvent(){//鼠标右击时显示菜单
  alert(item.name);
  return false;//屏蔽网页本身的右击效果
}

jquery写法
$(function(){
$(‘#youji‘).mousedown(function(e){
if(e.which==1){
alert("这是左击事件");

}else if(e.which == 2){
alert("这是中击事件");
}else{
alert("这是右击事件");
return false;//屏蔽不掉网页本身的右击事件
}
});
})

//鼠标右击的区域
<div id="youji" style="width:200px; height:200px; background-color:#1621E5"></div>

获取到鼠标在页面上点击时的xy坐标
js写法
var x,y;
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
x = mousePos.x;
y = mousePos.y;
}
document.onmousedown = mouseMove;

时间: 2024-11-05 11:33:52

获取鼠标在网页上的位置以及右击事件的相关文章

获取鼠标在窗体上的位置

实现效果: 知识运用: MouseEventArgs类的X属性Y属性 //该类用来为MouseUp MouseDown 和 MouseMove事件提供数据 实现代码: private void Form1_MouseMove(object sender, MouseEventArgs e) { textBox1.Text = e.X.ToString(); textBox2.Text = e.Y.ToString(); } 原文地址:https://www.cnblogs.com/feiyuch

获取鼠标早盒子中的 位置

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #box { width: 300px; height: 300px; border: 1px solid red; margin: 100px 10px

鼠标参数,获取鼠标在网页中的坐标

1. 事件对象 event 标准浏览器 传递给响应函数 IE 把 event 事件对象作为全局对象 window 的一个属性 2. 浏览器滚动条高度 标准浏览器 使用 documen.documentElement.scrollLeft    documen.documentElement.scrollTop Safari 等浏览器 使用 window.pageXOffset    window.pageYOffset 没有 doctype 声明的页面 document.body.scrollL

javascript: Element.getBoundingClientRect() 获取元素在网页上的坐标位置

来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置. 相关的属性:left,top,right,bottom 如果网页窗口有滚动条,还要加上下面的这一段: var scrollX = document.documentElement.scrollLeft || docume

getBoundingClientRect获取元素在页面上的位置

getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置. getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分). 该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height: 这里的top.left和css中的理解很相似,width.height是元素自身的宽高,但是right,bottom和css中的理解有点不一样.right是指元素右边界

鼠标在网页上的拖动效果

使用JavaScript写的鼠标拖动效果 近日项目中要做一个鼠标拖拽层的效果,于是手动使用Jquery做了一个,发出来跟大伙儿分享一下,并希望能得到高手的指点,如果哪位大侠觉得我的思路和代码不正确或者需要改进的话,希望能指点一二,在下感激不尽. 效果展示 下面是我的源代码 <html> <head> <style> div{ width:200px; height:200px; background-color:red; position:absolute; } <

怎样可以实现鼠标放在网页上的文字时,不出现I形状的标记,并且不能选则文字

css.让这部分区域的 cursor: default; 可以不显示I型的鼠标光标 不能选择文字.这个需求只能满足现代浏览器,老旧的IE8及以下的浏览器不能实现.以下上让某个div里的文字不能选中 1 2 3 4 5 6 div{     user-select: none;      -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select:none; }

js获取鼠标位置

1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化. 可是悲剧的是,PageX只有FF特有,IE这个悲剧没有啊T_T,所以大牛们想出了一个办法PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)3.screenX/screenY:鼠标在屏幕

获取鼠标位置的几个通用的JS函数

原文:http://www.open-open.com/code/view/1421401009218 /*两个通用函数,用于获取鼠标相对于整个页面的当前位置*/ function getX(e) { e = e || window.event; return e.pageX || e.clientX + document.body.scrollLeft; } function getY(e) { e = e || window.event; return e.pageY || e.client