ฉันเคยทำงานกับ jQuery ในโครงการปัจจุบันของฉัน แต่ฉันใช้ zepto.js Zepto ไม่มีposition()วิธีการเหมือนที่ jQuery ทำ Zepto มาพร้อมกับoffset()ไฟล์.

มีความคิดอย่างไรที่ฉันจะเรียกค่าออฟเซ็ตของคอนเทนเนอร์ที่สัมพันธ์กับพาเรนต์ด้วย pure js หรือกับ Zepto

คำเตือน: jQuery ไม่ใช่ JavaScript มาตรฐาน

element.offsetLeftและelement.offsetTopมีความบริสุทธิ์คุณสมบัติจาวาสคริปต์ในการหาตำแหน่งขององค์ประกอบที่เกี่ยวกับมันoffsetParent; เป็นองค์ประกอบหลักที่ใกล้ที่สุดโดยมีตำแหน่งrelativeหรือabsolute

หรือคุณสามารถใช้Zeptoเพื่อรับตำแหน่งขององค์ประกอบและแม่ของมันได้ตลอดเวลาและลบทั้งสอง:

var childPos = obj.offset();
var parentPos = obj.parent().offset();
var childOffset = {
    top: childPos.top - parentPos.top,
    left: childPos.left - parentPos.left
}

สิ่งนี้มีประโยชน์ในการให้ค่าชดเชยของเด็กที่สัมพันธ์กับผู้ปกครองแม้ว่าผู้ปกครองจะไม่ได้อยู่ในตำแหน่งก็ตาม

ใน js บริสุทธิ์เพียงแค่ใช้offsetLeftและoffsetTopคุณสมบัติ
ตัวอย่างซอ: http://jsfiddle.net/WKZ8P/

var elm = document.querySelector('span');
console.log(elm.offsetLeft, elm.offsetTop);

p   { position:relative; left:10px; top:85px; border:1px solid blue; }
span{ position:relative; left:30px; top:35px; border:1px solid red; }

<p>
    <span>paragraph</span>
</p>

ฉันทำแบบนี้ใน Internet Explorer

function getWindowRelativeOffset(parentWindow, elem) {
    var offset = {
        left : 0,
        top : 0
    };
    // relative to the target field's document
    offset.left = elem.getBoundingClientRect().left;
    offset.top = elem.getBoundingClientRect().top;
    // now we will calculate according to the current document, this current
    // document might be same as the document of target field or it may be
    // parent of the document of the target field
    var childWindow = elem.document.frames.window;
    while (childWindow != parentWindow) {
        offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
        offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
        childWindow = childWindow.parent;
    }

    return offset;
};

=================== เรียกแบบนี้ก็ได้

getWindowRelativeOffset(top, inputElement);

ฉันมุ่งเน้นไปที่ IE ตามโฟกัสของฉันเท่านั้น แต่สิ่งที่คล้ายกันนี้สามารถทำได้สำหรับเบราว์เซอร์อื่น

เพิ่มออฟเซ็ตของเหตุการณ์ให้กับออฟเซ็ตองค์ประกอบหลักเพื่อให้ได้ตำแหน่งออฟเซ็ตสัมบูรณ์ของเหตุการณ์

ตัวอย่าง :

HTMLElement.addEventListener('mousedown',function(e){

    var offsetX = e.offsetX;
    var offsetY = e.offsetY;

    if( e.target != this ){ // 'this' is our HTMLElement

        offsetX = e.target.offsetLeft + e.offsetX;
        offsetY = e.target.offsetTop + e.offsetY;

    }
}

เมื่อเป้าหมายเหตุการณ์ไม่ใช่องค์ประกอบที่เหตุการณ์ได้รับการลงทะเบียนจะเพิ่มออฟเซ็ตของพาเรนต์ลงในออฟเซ็ตเหตุการณ์ปัจจุบันเพื่อคำนวณค่าออฟเซ็ต "ค่าสัมบูรณ์"

ตาม Mozilla Web API: "คุณสมบัติHTMLElement.offsetLeft แบบอ่านอย่างเดียวจะส่งคืนจำนวนพิกเซลที่มุมบนซ้ายขององค์ประกอบปัจจุบันหักล้างไปทางซ้ายภายในโหนด HTMLElement.offsetParent "

สิ่งนี้ส่วนใหญ่เกิดขึ้นเมื่อคุณลงทะเบียนเหตุการณ์บนพาเรนต์ที่มีลูกเพิ่มอีกหลายตัวเช่นปุ่มที่มีไอคอนด้านในหรือช่วงข้อความliองค์ประกอบที่มีช่วงภายใน ฯลฯ ...

ตัวอย่าง

ดังนั้นหากเรามีองค์ประกอบลูกที่มี id ของ "องค์ประกอบลูก" และเราต้องการให้มันอยู่ในตำแหน่งซ้าย / บนสุดเทียบกับองค์ประกอบหลักให้พูดว่า div ที่มีคลาสเป็น "item-parent" เราจะ ใช้รหัสนี้

var position = $("#child-element").offsetRelative("div.item-parent");
alert('left: '+position.left+', top: '+position.top);

ปลั๊กอินสุดท้ายสำหรับปลั๊กอินจริง (มีบันทึกย่อบางส่วนที่อธิบายถึงสิ่งที่เกิดขึ้น):

// offsetRelative (or, if you prefer, positionRelative)
(function($){
    $.fn.offsetRelative = function(top){
        var $this = $(this);
        var $parent = $this.offsetParent();
        var offset = $this.position();
        if(!top) return offset; // Didn't pass a 'top' element 
        else if($parent.get(0).tagName == "BODY") return offset; // Reached top of document
        else if($(top,$parent).length) return offset; // Parent element contains the 'top' element we want the offset to be relative to 
        else if($parent[0] == $(top)[0]) return offset; // Reached the 'top' element we want the offset to be relative to 
        else { // Get parent's relative offset
            var parent_offset = $parent.offsetRelative(top);
            offset.top += parent_offset.top;
            offset.left += parent_offset.left;
            return offset;
        }
    };
    $.fn.positionRelative = function(top){
        return $(this).offsetRelative(top);
    };
}(jQuery));

หมายเหตุ:คุณสามารถใช้สิ่งนี้บน mouseClick หรือ mouseover Event

$(this).offsetRelative("div.item-parent");

ฉันได้รับโซลูชันอื่น ลบค่าคุณสมบัติหลักจากค่าคุณสมบัติลูก

$('child-div').offset().top - $('parent-div').offset().top;

แน่นอนว่าเป็นเรื่องง่ายด้วย JS ที่บริสุทธิ์เพียงแค่ทำสิ่งนี้ทำงานกับแผง HTML 5 แบบคงที่และเคลื่อนไหวได้เช่นกันฉันสร้างและลองใช้รหัสนี้และใช้งานได้กับเบราว์เซอร์ใด ๆ (รวม IE 8):

<script type="text/javascript">
    function fGetCSSProperty(s, e) {
        try { return s.currentStyle ? s.currentStyle[e] : window.getComputedStyle(s)[e]; }
        catch (x) { return null; } 
    }
    function fGetOffSetParent(s) {
        var a = s.offsetParent || document.body;

        while (a && a.tagName && a != document.body && fGetCSSProperty(a, 'position') == 'static')
            a = a.offsetParent;
        return a;
    }
    function GetPosition(s) {
        var b = fGetOffSetParent(s);

        return { Left: (b.offsetLeft + s.offsetLeft), Top: (b.offsetTop + s.offsetTop) };
    }    
</script>