开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery获取点击的坐标

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，你可以轻松地获取用户点击事件的坐标。

相关优势

简化代码：jQuery 提供了简洁的语法，使得代码更加易读和维护。
跨浏览器兼容性：jQuery 处理了不同浏览器之间的差异，使得代码在不同浏览器中都能正常运行。
丰富的插件支持：jQuery 拥有大量的插件库，可以轻松实现各种功能。

类型

获取点击坐标的方式主要有两种：

鼠标点击事件的 pageX 和 pageY 属性：这些属性表示鼠标点击事件相对于整个文档的 X 和 Y 坐标。
鼠标点击事件的 offsetX 和 offsetY 属性：这些属性表示鼠标点击事件相对于触发元素边界的 X 和 Y 坐标。

应用场景

获取点击坐标在许多场景中都非常有用，例如：

拖放功能：在实现拖放功能时，需要知道鼠标点击的起始位置。
弹出窗口定位：根据用户的点击位置，动态定位弹出窗口的位置。
图表交互：在图表库中，根据用户的点击位置获取相应的数据。

示例代码

以下是一个使用 jQuery 获取点击坐标的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Click Coordinates</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="clickArea" style="width: 300px; height: 200px; border: 1px solid black;">
        Click anywhere in this area to get the coordinates.
    </div>

    <script>
        $(document).ready(function() {
            $('#clickArea').click(function(event) {
                var pageX = event.pageX;
                var pageY = event.pageY;
                var offsetX = event.offsetX;
                var offsetY = event.offsetY;

                console.log('Page X: ' + pageX);
                console.log('Page Y: ' + pageY);
                console.log('Offset X: ' + offsetX);
                console.log('Offset Y: ' + offsetY);
            });
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

jQuery 未加载：确保在 HTML 文件中正确引入了 jQuery 库。
jQuery 未加载：确保在 HTML 文件中正确引入了 jQuery 库。
选择器错误：确保使用正确的选择器来绑定点击事件。
选择器错误：确保使用正确的选择器来绑定点击事件。
浏览器兼容性问题：虽然 jQuery 处理了大部分兼容性问题，但仍需注意某些旧版浏览器的特殊情况。

通过以上方法，你可以轻松地使用 jQuery 获取点击坐标，并解决可能遇到的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jquery 获取鼠标和元素的坐标点

获取当前鼠标相对img元素的坐标 $('div').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left;...//获取当前鼠标相对div的X坐标 varpositionY=e.pageY-$(this).offset().top; //获取当前鼠标相对div的Y坐标 console.log...(positionX+' '+positionY); }) 获取当前鼠标相对浏览器的原点的坐标 $('div').mousemove(function(e) { var xx...3，获取对象元素的宽度(width()方法) var right = offset.left+obj.width(); 实例中是获取对象的右下角位置，创建新窗口的左部位置。...4，获取对象元素的高度(height()方法) var down =offset.top+obj.height(); 实例中是获取对象的右下角位置，创建新窗口的顶部位置。

2.4K4 1

JS-jquery 获取当前点击的对象

meta charset="utf-8"> 获取当前点击对象... /*传入参数this即可获取当前点击的对象...console.log(data.id); alert(data.innerText); } 点击事件里传参数...this 再调用的方法里直接形参加属性即可。

8.4K2 0

jquery中通过鼠标获取页面坐标

jquery_shijian_function.html... jquery.js">

3.3K5 0

chart控件获取鼠标点击坐标，十字坐标跟随——c#

方法一：鼠标点击波形鼠标点击波形，显示点击位置的x，y值 private void chart1_MouseClick(object sender, MouseEventArgs e) //chart1...是你建的chart控件，实际名字根据你自己代码里的命名 { HitTestResult hit = chart1.HitTest(e.X,...textBox1.Text = string.Format("{0:F0},{1:F0}", "x:"+xValue, "y:"+yValue);//textbox1也是自己建的一个专门用来显示的内容框..., xValue, yValue); } 调用方法： chart1.MouseMove += new MouseEventHandler(chart1_MouseMove); 绘制十字坐标...1].Points.Clear(); chartVoltage.Series[2].Points.Clear(); //获取当前鼠标坐标

3.5K5 1

input checkbox复选框点击获取当前选中状态jquery

is判断 // let checkStatus=$(id).is(':checked'); // console.log(checkStatus) //用prop方法（用attr获取不到...type="checkbox" value="" id="selectManyProject" onclick="checkAll('#selectManyProject')"/> 这里注意传入id的时候记得一定要加...#，或者在jquery代码中加#,否则就看不到结果了。

2.4K3 0

jQuery点击返回顶部

(document).ready(function(){ //为当前窗口添加滚动条滚动事件 $(window).scroll(function(){ //创建一个变量存储当前窗口下移的高度...backtop').fadeIn(500); }else{ $('.backtop').fadeOut(500); } }) }) //为返回顶部元素添加点击事件...$('.backtop').click(function(){ //将当前窗口的内容区滚动高度改为0，即顶部 $("html,body").animate({scrollTop:0},"fast

6.1K4 0

jQuery点击click()事件

这是一个段落。

<button onclick="active()">切换</button> <script> $(document).ready...

9.9K2 0

JQuery各种点击事件的区别

在工作中，经常用到js的点击事件，有好多种表现形式，今天抽空总结一下它们的区别与联系。废话不多说，开始写测试案例。首先声明，本人水平有限，如果有错误之处，还请指正。...一、.点击事件，用到的有 1:$(".J_edit_save").on('click',function(e){}; 2:$('#J_new').click(function(e){}); 3:$('...DOCTYPE html> jquery/1.10.2/jquery.min.js...DOCTYPE html> jquery/1.10.2/jquery.min.js...喜欢的朋友可以扫描我的个人公众号，有好东西可以一起分享。免费获取各种学习视频、源码、PPT资料也可以微信搜索公众号：Java程序员那些事最新文章会在公众号优先发布，感谢关注。

2.9K4 0

swift 语言获取触摸点坐标 touchesBegan 中的 touches的坐标获取「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。...withEvent event: UIEvent) { var p = touches.anyObject().locationInview(self) } 很多老教材都是这个方法来获取...，touches.anyObject()，可是最新的版本提示touches根本没有anyObject()这个方法了，怎么办呢？

1.8K3 0

手机网页中手指触摸计算 --JQuery 获取touchstart,touchmove,touchend 坐标

JQuery写法 ---- 1 //手指开始触摸时，触发事件 2 $("#id").on('touchstart',function(e){ 3 4 var touch = e.originalEvent.targetTouches...[0]; //取页面上第一个手指 5 6 var x_ distance = touch.pageX; //获取手指在X轴上距最左边的距离 7 8 }) 三个函数： touchstart --...(手指放在页面时触发) touchend --(手指离开页面时触发) touchmove --(手指移动时触发) 获取手指第几个函数： e.originalEvent.changedTouches[0]...--(获取第一个手指,0->1) 获取距离(touch为获取手指的变量名)： touch.pageX --获取手指在X轴上距最左边的距离 touch.pageY --获取手指在Y轴上距最上边的距离 -

1.3K2 0

一招轻松获取图片中鼠标点击处坐标

大家好，今天给大家分享，一个非常实用的技巧。通过鼠标点击获取图像的坐标值，当然也可以进一步通过坐标获取 RGB 值。...用途： 1、可用于获取 mask 区域的坐标 2、获取关键点、线坐标，便于制图等目标：假设目前我们的任务是希望获取车辆进入减速带时的速度，那么首先需要做的第一件事就是获取减速带的区域坐标。...鼠标事件可以是任何与鼠标相关的事件，如左键向下、左键向上、左键双击等。它为我们提供了每个鼠标事件的坐标（x，y）。官方给了一些demo，用于绘制圆和矩形。...这里我们参考demo，做一定的修改，绘制点，并返回坐标即可。代码实现这里可以通过修改，读入图片的路径，切换到大家所需要处理的图片。...1、通过鼠标坐标的点击，即可获取坐标值 2、图片上会显示一个小点、坐标值，并在终端中显示坐标值 # coding: utf-8 import cv2 import numpy as np img =

2.7K1 0

vue click点击获取点击元素

点击 //获取当前点击元素 methods:{ test(e){ console.log(e.currrentTarget)...} } currentTarget事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。...即点击事件绑定在哪个元素，currentTarget获取的就是那一个元素。在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于target属性。...Event对象的一些兼容写法 // 获得event对象兼容性写法 event||(event = window.event); //获得target兼容性写法 event.target||event,

4.7K1 0

jQuery点击图片开启，再次点击图片关闭效果

要求：jQuery点击图片开启，再次点击图片关闭效果 2：获取选中的图片的状态并以整型的格式传给后端 3：获取并且渲染传给数据库的图片状态 jquery.../3.4.1/jquery.min.js"> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/

7.7K5 0

获取点击的区域范围

点击的元素在哪个像素范围父组件外部 import TestRef...margin-left:50px;"> left 点击...style="margin-left:2000px"> right 点击

1.2K4 0

【100个 Unity实用技能】| 游戏中获取鼠标点击的坐标，并将游戏对象移动到鼠标的点击位置

Unity 实用小技能学习游戏中获取鼠标点击的坐标，并将游戏对象移动到鼠标的点击位置作用：在游戏中实现鼠标点击的时候，获取到鼠标点的的这个坐标，并将某个游戏对象移动到这个坐标上。...;//获取到点击屏幕的屏幕坐标 Vector3 mousePositionInWorld;//将点击屏幕的屏幕坐标转换为世界坐标 private void LateUpdate()...Input.GetMouseButton(0)) { MouseFollow(); } } /// /// 获取鼠标点击坐标的方法.../// public Vector3 MouseFollow() { //获取游戏对象在世界坐标中的位置，并转换为屏幕坐标；...screenPosition = Camera.main.WorldToScreenPoint(targetPos.transform.position); //获取鼠标在场景中坐标

3.7K3 0

Android MotionEvent 坐标获取

Android MotionEvent中getX()与getRawX()都是获取屏幕坐标（横），但二者又有区别 getX() ：是获取相对当前控件（View）的坐标...getRawX() ：是获取相对显示屏幕左上角的坐标演示示例代码 Java代码： public class MainActivity extends Activity implements...点击屏幕中间的Button，获取的坐标信息： ?...结果说明： x，y ：分别获取的相对Button控件的坐标 getX()， getY() rawX，rawY ：分别获取的相对显示屏幕左上角的坐标 getRawX()， getRawY() 总结...： getX() 是表示Widget相对于自身左上角的x坐标，而getRawX()是表示相对于屏幕左上角的x坐标值(注意:这个屏幕左上角是手机屏幕左上角，不管activity是否有titleBar或是否全屏幕

2.1K3 0

jQuery点击图片来回切换功能

在项目里，有时候会写这样的开关效果，点击开关来回切换，也就是jquery实现点击图片切换为另一图片,再次点击恢复到原图片。下面是一个小的demo示例： <!...所以换个demo 实现一下jQuery点击图片来回切换功能的属性值 $(this).attr("src", "images/check.png") //这里一定要放另外的一张图...，不然当点击时，会实现不了切换的效果 } else { $(this).attr("src", "images/checked.png")...kg; //这里的感叹号是取反的意思，如果你没有写，当你点击切换回第一张图片时，就会不生效 })

9.4K2 0

jquery点击删除按钮,删除当前的div

现在有多行div，共用一个删除事件，点击删除的时候，会把页面所有的div全都删掉了，但是我只需要点击哪一行div里面的删除按钮，就删除哪一行，其实很简单，只需要写一个this事件即可。 ?...cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> jquery.../2.1.1/jquery.min.js"> 原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚

5.2K3 0

Qml获取某个控件的全局坐标

需要在界面显示菜单栏，但菜单栏需要根据控件的所在位置显示。如下演示：点击详情(detail)按钮调出菜单列表。菜单栏的位置需要定位详情按钮的下面，那么就需要知道具体坐标。 ...由于Qml控件的坐标是相对坐标(相对于父控件的坐标)，既然是相对父控件的坐标，那么我们遍历所有父控件的坐标进行累加就可以计算出该控件的全局坐标了。...onClicked: {} } } /* 圆形详情按钮，点击可调出菜单栏...text: "detail" } } } } } /* 获取相对于根窗口的全局的坐标...，输入参数为需要获取全局坐标的对象 */ function getGlobalPosition(targetObject) { var positionX = 0

2.8K1 0

jquery获取scrollHeight

大家好，又见面了，我是你们的朋友全栈君。...).prop(“scrollHeight”); 其他操作： $(window).height(); //浏览器当前窗口可视区域高度 $(document).height(); //浏览器当前窗口文档的高度...$(document.body).height();//浏览器当前窗口文档body的高度 $(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度...$(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度包括border padding margin 滚动下拉加载思路：判断当前滚动条的位置是否到达距离...scrollHeight 滚动高度的某个位置，注意滚动条位置到底后，加上可视区域高度，才等于 scrollHeight 高度。

1.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭