如何定位您单击并用于偏移的事件

Question

我有几个div元素。 在mousedown事件中，我获得了我单击的元素属性，然后使用 Jquery 偏移方法，我似乎无法正确触发$(elt) ，因此它作为 Jquery 获取。

我试图尽可能少地使用 Jquery 库作为 wan 来摆脱它。

offsetLeft和offsetTop都是在 HTML 元素上定义的 JavaScript 属性。 offset()是一种需要 jQuery 对象的 jQuery 方法。 我明白你所需要的只是像$(elt)那样包装元素。

在关闭标签之前，我在 JS 的最后一行出现错误。

 elementBlock.on('mousedown',function(e){
        var el = e.target.nodeName;
        var elt = e.target.getAttribute('id');
        console.log(elt); // i get the clean attribute
        console.log(el); // i get DIV
        elt.tmp.left = e.clientX - $(elt).offset().left;

}

HTML

 <div  id="elementBlock">
                  <div id="blue-left"></div>
                  <div id="blue-right"></div>
                </div>

Answer 1

您想使用$(e.target)而不是$(elt)

当前代码中的问题是，如果要按 ID 定位 jQuery 元素，则需要在该选择器前加上#前缀。

所以$("#" + elt)也可以工作，但他们上面的建议更清晰。 有关 jQuery 选择器的更多信息，请参见此处： https : //api.jquery.com/category/selectors/

Answer 2

是的，你可以使用$(elt)的语法，但只有当你在前面加上的ID选择器（即ELT # ）。 有关更多信息，请参阅ID 选择器的 jQuery 文档。

此外， elt被分配给id属性，它是一个字符串。 字符串原型没有属性tmp 。 要设置左样式，您可以访问元素的样式属性：

e.target.style.left = e.clientX - e.target.offsetLeft;

编辑：

您提到您正在“尝试尽可能少地使用 Jquery 库”。 我们可以删除所有 jQuery 函数并使用原生 Javascript，如下例所示。 它使用带有document.addEventListener() 的事件委托（请注意，旧浏览器的支持存在限制，例如 Internet Explorer - 请参阅MDN 文档中有关使用 IE 添加事件处理程序的说明），检查元素是否被点击位于具有id属性elementBlock的元素内（即元素本身或子元素），然后利用您提到的属性： HTMLElement.offsetTop和HTMLElement.offsetLeft而不是 jQuery 的.position() 。

并且您可能注意到e.target.getAttribute('id')被e.target.id取代 - DOM 元素的属性就足够了。 有关这方面的更多解释，请参阅此答案。

 //observe DOM ready document.addEventListener('DOMContentLoaded', function() { //observe clicks on the DOM document.addEventListener('click', function(clickEvent) { //look up the DOM tree from the event target to see if we clicked within the elementBlock container var target = clickEvent.target; while (target && target.id !== 'elementBlock' && target !== undefined) { target = target.parentNode; } //if we clicked within the elementBlock container if (target && target.id == 'elementBlock') { //log out the offsetTop and offsetLeft console.log('offsetTop: ', clickEvent.target.offsetTop); console.log('offsetLeft: ', clickEvent.target.offsetLeft); } }); });

 #container div { border: 1px solid #000; padding: 3px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="elementBlock">elementBlock <div id="blue-left">L</div> <div id="blue-right">R</div> </div> </div>