单击子项时获取父offsetX

Question

我有结构：

<div class="parent"> 
   <div class="child"> 
   </div>
<div>

我有jquery绑定点击

$('div.parent').bind('click', function(e) { e.offsetX }); 

chid居中，当我点击它时，我有一个孩子的e.offsetX而不是父母。 如果单击子元素，我如何获得父offsetX？

我想永远得到父e.offsetX

我的意思是event.click偏移，而不是容器偏移

Answer 1

试试这个：

var offset = $(this).closest("div").css("offsetX");

像这样，var offset将具有父div di offset的值。

更新：

$("#something").click(function(e){
   var childOffset = $(this).offset();
   alert(e.pageX - e.childOffset);
});

通过从整个偏移量中提取子偏移量，您将得到父偏移量。

Answer 2

在您的代码中：

$('div.parent').bind('click', function(e) {
  alert(e.offsetX); // gives the offsetX of the click not the parent div
});

e.offsetX表示在父div上发生的 offsetX of the click 。我想你想要dom node / jquery对象的offsetX，以防万一为父div。

$('div.parent').on('click', function(e) { // use .on() instead
  alert($(e.target).offset().left); // $(e.target).offset().left will give you offsetX.
});

＆＃13;

＆＃13;

$('div.parent').on('click', function(e) {
  alert('left : '+ $(e.target).offset().left + "top : "+$(e.target).offset().top);
});

＆＃13;

.parent {
  width: 200px;
  height: 200px;
  background: red;
  margin:0 auto;
}
.child {
  width: 100px;
  height: 100px;
  background: yellow;
  margin:0 auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
  </div>
  <div>

＆＃13;

＆＃13;

＆＃13;