1

我有几个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>
4

2 回答 2

2

是的，您可以使用$(elt)语法，但前提是您必须在elt前面加上ID 选择器（即#）。有关更多信息，请参阅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 的.位置（）。

您可能注意到 , 的用法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>

于 2017-01-20T22:48:33.073 回答
2

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

当前代码中的问题是，如果您想通过 ID 定位 jQuery 元素，则需要在该选择器前面加上#.

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

于 2017-01-20T22:21:51.497 回答