当前位置: 首页 > 面试题库 >

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

韦翰音
2023-03-14
问题内容

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

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

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


问题答案:

您是否要relative简单地将鼠标指针定位到元素(或)的位置,

编辑:

1)event.pageXevent.pageY给你鼠标位置的相关文件!

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

3)position():它为您提供元素的相对位置,即

考虑一个元素嵌入另一个元素内

例如

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

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));
    });
});


 类似资料:
  • 我想在jQuery的一个警报中获得点击元素的文本。参见下面的示例https://jsfidle.net/pymd4n04/2/ 但当我单击第一次时,将显示空警报,而当我单击第二次时,将显示该值,但显示两次警报。并保持递增警报。 如有任何帮助,我们将不胜感激。 提前致谢

  • 问题内容: 使用jQuery,如何获得具有插入符号(光标)焦点的输入元素? 换句话说,如何确定输入是否具有插入符号的焦点? 问题答案: 您应该使用哪一个?引用jQuery文档: 与其他伪类选择器(以“:”开头的选择器)一样,建议在:focus之前加上标签名称或其他选择器;否则,暗示通用选择器(“ *”)。换句话说,裸露等于。如果您正在寻找当前关注的元素,则$(document.activeElem

  • 问题内容: 将click事件处理程序添加到canvas元素(将返回click的x和y坐标)(相对于canvas元素)的最简单方法是什么? 不需要旧版浏览器兼容性,Safari,Opera和Firefox都可以。 问题答案: 这个答案很老了,它使用检查不再需要的旧浏览器,因为和属性在所有当前浏览器中都有效。您可能想查看PatriquesAnswer,以获得更简单,最新的解决方案。 最初的答案: 正如

  • 本文向大家介绍python点击鼠标获取坐标(Graphics),包括了python点击鼠标获取坐标(Graphics)的使用技巧和注意事项,需要的朋友参考一下 使用Python进行图像编程,要使用到Graphics库。下面列举出较常用的代码 接下来使用Graphics库进行编写 出现下面问题:name '_name_'is not defined.出现原因是下划线应该是两个(__'name'__)

  • 本文向大家介绍jquery用offset()方法获得元素的xy坐标,包括了jquery用offset()方法获得元素的xy坐标的使用技巧和注意事项,需要的朋友参考一下 获取页面某一元素的绝对X,Y坐标,可以用offset()方法:(body属性设置margin :0;padding:0;)

  • 问题内容: 我看到有通过各种Java库的selenium,如让一个元素的屏幕位置和尺寸的方法,提供和使用。 有什么方法可以使用Selenium Python绑定来获取元素的位置或尺寸? 问题答案: 得到它了!线索在selenium.webdriver.remote.webelement上— Selenium 3.14文档。 WebElement具有属性和。两者都是类型。 输出: 它们还有一个称为的