gpt4 book ai didi

javascript - 使用 jQuery 如何获取目标元素上的点击坐标

转载 作者:IT王子 更新时间:2023-10-29 02:41:15 26 4
gpt4 key购买 nike

我的 html 元素有以下事件处理程序

jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});

我需要在单击时找到鼠标在#seek-bar 上的位置。我原以为上面的代码应该可以工作,但它给出了不正确的结果

最佳答案

你是否试图让鼠标指针的位置相对于到元素(或)只是鼠标指针位置

试试这个演示:http://jsfiddle.net/AMsK9/


编辑:

1) event.pageX, event.pageY 给你鼠标位置相关的文档!

引用:http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

2) offset() : 给出元素的偏移位置

引用:http://api.jquery.com/offset/

3) position() :它给你一个元素的相对位置,即

考虑一个元素嵌入到另一个元素中

示例:

<div id="imParent">
<div id="imchild" />
</div>

引用:http://api.jquery.com/position/

HTML

<body>
<div id="A" style="left:100px;"> Default <br /> mouse<br/>position </div>
<div id="B" style="left:300px;"> offset() <br /> mouse<br/>position </div>
<div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>

JavaScript

$(document).ready(function (e) {

$('#A').click(function (e) { //Default mouse Position
alert(e.pageX + ' , ' + e.pageY);
});

$('#B').click(function (e) { //Offset mouse Position
var posX = $(this).offset().left,
posY = $(this).offset().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});

$('#C').click(function (e) { //Relative ( to its parent) mouse position
var posX = $(this).position().left,
posY = $(this).position().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
});

关于javascript - 使用 jQuery 如何获取目标元素上的点击坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3234977/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com