首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery按键事件不起作用的pageX和pageY

是指在使用jQuery绑定按键事件时,无法获取到鼠标点击位置的横坐标pageX和纵坐标pageY的问题。

在jQuery中,按键事件通常是通过keydownkeyupkeypress来绑定的。这些事件主要用于捕获键盘按键的动作,而不是鼠标点击事件。因此,无法直接通过这些事件获取鼠标点击位置的pageX和pageY。

如果需要获取鼠标点击位置的坐标,可以使用鼠标事件,如clickmousedownmouseup等。这些事件可以通过event.pageXevent.pageY来获取鼠标点击位置的横坐标和纵坐标。

以下是一个示例代码,演示如何通过jQuery获取鼠标点击位置的坐标:

代码语言:javascript
复制
$(document).on('click', function(event) {
  var x = event.pageX;
  var y = event.pageY;
  console.log('鼠标点击位置:', x, y);
});

在上述代码中,通过$(document).on('click', ...)来绑定了一个点击事件,当页面上发生点击动作时,会触发该事件,并通过event.pageXevent.pageY获取鼠标点击位置的坐标。最后,通过console.log将坐标打印到控制台上。

对于jQuery按键事件而言,如果需要获取鼠标点击位置的坐标,可以考虑使用鼠标事件来替代,或者通过其他方式获取坐标信息。

腾讯云相关产品和产品介绍链接地址:

  • 云服务器 CVM:提供弹性计算能力,满足各类业务需求。
  • 云数据库 MySQL:高性能、可扩展的关系型数据库服务。
  • 云存储 COS:安全可靠的对象存储服务,适用于存储和处理任意类型的文件和数据。
  • 人工智能平台 AI Lab:提供丰富的人工智能算法和模型,帮助开发者快速构建智能应用。
  • 物联网平台 IoT Hub:提供全面的物联网解决方案,支持设备连接、数据采集和应用开发。
  • 云原生容器服务 TKE:基于Kubernetes的容器服务,简化容器化应用的部署和管理。
  • 区块链服务 BCOS:提供安全可信的区块链解决方案,支持多种应用场景。
  • 云通信 IM:提供实时通信能力,支持文字、语音、视频等多种通信方式。
  • 音视频处理 VOD:提供高效、稳定的音视频处理服务,满足多媒体处理需求。

以上是腾讯云提供的一些相关产品,可以根据具体需求选择适合的产品来支持云计算和开发工作。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

杨老师课堂之Jquery筛选,事件,效果,Ajax,javascript跨域)

事件对象: 由于IE-DOM标准DOM实现事件对象方法各不相同,导致在不同 浏览器中获取事件对象变得比较困难.针对这个问题,jquery进行了必要扩 展封装,从而使得在任何浏览器中能很好轻松访问获取事件对象以及事...(6)event.pageXevent.pageY....该方法作用是获取到光标相对于页面的x坐标y坐标.如果没有使用jquery时,那么IE浏览器中 是使用event.pageX()event.pageY()方法.如果页面上有滚动条,则还要加上滚动条宽度高...); return false;//阻止链接跳转 }); (7)event.which()方法 该方法作用是在鼠标单击事件中获取到鼠标左中右键,在键盘事件中获取键盘按键....,添加到body标签下 $("body").append($div); //4 如何调整显示位置(相对鼠标的坐标值:e.pageXe.pageY)

8.2K20

鼠标滑过显示图片大图效果

显示图片大图。 效果图: 说明: 用到了mouseover、mouseout、mousemove三个事件。分别表示鼠标滑过图片、鼠标移除图片、鼠标在图片上移动三个事件。...对于mouserover事件。做下面几件事: 获取原标题,并将标题置为空,防止title提示框同一时候出现。 创建提示框对象,并将图片地址title放入当中显示。 设置该提示框位置并显示。...移除提示框 对于mousemove,我们须要动态调整提示框位置。 由于还没看到动画那一块,所以动画处理不是太好,以后在优化吧。 完整代码: jquery test <script src="<em>jquery</em>-1.11.1...+"px", "left":e.pageX+"px", "position":"absolute" }).show("fast"); //设置x坐标y坐标,并显示 }).mouseout

2.8K10

JavaScript 编程精解 中文第三版 十五、处理事件

诸如shift、ctrl、altmeta(Mac 上command)之类修饰按键会像普通按键一样产生事件。...指针事件 目前有两种广泛使用方式,用于指向屏幕上东西:鼠标(包括类似鼠标的设备,如触摸板轨迹球)触摸屏。 它们产生不同类型事件。 鼠标点击 点击鼠标按键会触发一系列事件。"...或pageXpageY,它们相对于整个文档左上角(当窗口被滚动时可能不同)。 下面的代码实现了简单绘图程序。每次点击文档时,会在鼠标指针下添加一个点。...鼠标事件只涵盖了简单情况下触摸交互 - 如果您为按钮添加"click"处理器,触摸用户仍然可以使用它。 但是像上一个示例中可调整大小栏在触摸屏上不起作用。 触摸交互触发了特定事件类型。...相反,它们事件对象拥有touches属性,它拥有一个类数组对象,每个对象都有自己clientX,clientY,pageXpageY属性。 你可以这样,在每个触摸手指周围显示红色圆圈。

5.5K20

SQL语句放在了哪里?

对于有规律比较好办了,但是对于哪些没啥规律怎么办呢? 想了一下,有几种方式,弄了张图。欢迎大家补充。 因为 有字数限制,必须200字以上。 所以 发一段小代码吧,基于jQuery拖拽功能。...* $("#divID").drag();// divID:要移动容器ID * $("#divID").drag("spanID");// divID:要移动容器ID;spanID:移动是拖拽对象...*/ jQuery.fn.extend({     drag: function (objDragId, isShowBg) { var bool = false; var pageX = 0...bool) return; var x = e.pageX - pageX; var y = e.pageY - pageY; var off = { top: 1, legt: 1 }; //... = e.pageX;                     pageY = e.pageY;                     oldOff = objMove.offset(); return

1.3K80

js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageXpageY、screenX、screenY「建议收藏」

子元素也会触发,可以冒泡触发 区别:mouseentermouseleave是针对侦听对象触发,阻止了冒泡 阻止鼠标的默认事件 e.preventDefault() e.returnValue=false...clickHandler(e){ console.log(e); } 打印结果如下(只截取了部分内容): altKey ctrlKey shiftKey metaKey 是否按键点击...以下内容为坐标值说明: clientXclientY与x,y clientXclientY与x,y一样,都是客户区域坐标,指鼠标的坐标,以浏览器显示区域左上角开始,x,y是新浏览器支持 以下截图打印结果都是...body左上角为原点: 当元素父级都有定位属性时,以父级左上角为原点: 当元素自身有定位属性时,以自身左上角为原点: pageXpageY pageXpageY...layerX,layerY,往上找有定位属性父元素左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body左上角 pageXpageY相对页面左上角距离 screenX screenY

2.5K20

“鼠标移入显示悬浮框”特效,也可以“高大上”

).offset().left”用于获取元素距页面左边距离; 原生JS中,通过事件对象(event)pageX可以获取鼠标相对于页面的X轴位置;通过事件对象(event)pageY可以获取鼠标相对于页面的...通过jQuery获取到当前元素与页面顶部、左侧距离,再获取鼠标处于页面的坐标;之后通过计算获取到下图中“h”“w”。...“h”为event.pageY-$(元素).offset().top,是鼠标相对于块元素内Y轴值;“w”同理。详细可见下图代码。 ?...范例代码 var x=event.pageX-$(this).offset().left,//得到鼠标在块中坐标 y=event.pageY-$(this).offset().top,//得到鼠标在块中坐标...判断鼠标处于B区代码实例: var x=event.pageX-$(this).offset().left,//得到鼠标在块中坐标 y=event.pageY-$(this).offset(

5.1K90

第127天:移动端-获取触摸点位置

; (3)注册滑动事件 (4)变量重复赋值 (5)结束触摸一瞬间记录最后手指所在坐标X (6)比较开始结束坐标大小 (7)控制精度 获取每次手指滑动距离,当距离大于一定值时,就认为有方向变化...       手指头在屏幕上滑动触发事件 3.touchend         当手指从屏幕上离开时候触发 利用jquery配合使用方法如下: $("#demoid").bind('touchstart...touchstart、touchmove、touchend三种事件鼠标位置点获取: (1)touchstart事件下获取:e.originalEvent.targetTouches[0].pageX...[0],所以位置.pageX .pageY就ok了 (2)touchend事件获取:e3.originalEvent.changedTouches[0].pageX 下面是其他一些介绍: 每个Touch...pageY:触摸目标在页面中y坐标。 screenX:触摸目标在屏幕中x坐标。 screenY:触摸目标在屏幕中y坐标。 target:触目的DOM节点目标。

1.4K20

dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成更新 css,从 js 事件 css 选择器苦海中脱离出来

layout.mouse.pageX 是预先设定好对象,其值会随鼠标的移动而更新,值更新时 CSS 随之对应更新。...你也可以自定义绑定对象 */ top:{{layout.mouse.pageY}}px; left:{{layout.mouse.pageX}}px; } 如果是用 js 来实现这些效果的话,就会充斥着各种事件,各种变量加加减减, css 选择器更新,代码挺丑,而且 dom 类似...dynamic-css 使你从此脱离事件选择器苦海,来到数据绑定乐园!欢迎使用交流!...jQuery $.get 方法,如果你项目不想引入 jQuery,也是可以,传给 dynamic-css 具有相同 get 方法功能对象即可。

1.7K20
领券