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

Question

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

我正在尝试尽可能少地使用 Jquery 库以摆脱它。

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

是的，您可以使用 $(elt) 语法，但前提是您在 elt 前面加上 ID 选择器(即 #)。有关 ID Selector 的信息，请参阅 jQuery 文档了解更多信息。

此外，elt 被分配给 id 属性，它是一个字符串。 string prototype没有属性tmp。要设置 left 样式，您可以访问元素的 style 属性:

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

编辑:

您提到您“尝试尽可能少地使用 Jquery 库”。我们可以删除所有 jQuery 函数并使用 native Javascript，如下例所示。它使用事件委托(delegate) document.addEventListener() (请注意，旧浏览器的支持存在限制，例如 Internet Explorer - 请参阅 notes about adding event handlers with IE in the MDN documentation )，检查单击的元素是否在具有 id 属性 elementBlock 的元素内 (即元素本身或子元素)，然后利用您提到的属性:HTMLElement.offsetTop和 HTMLElement.offsetLeft而不是 jQuery 的 .position() .

您可能注意到 e.target.getAttribute('id') 的用法被替换为 e.target.id - DOM 元素的属性足够了。有关这方面的更多解释，请参阅 this answer .

//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>