ใช้ jQuery วิธีรับพิกัดการคลิกบนองค์ประกอบเป้าหมาย

109

ฉันมีตัวจัดการเหตุการณ์ต่อไปนี้สำหรับองค์ประกอบ html ของฉัน

jQuery("#seek-bar").click(function(e){
    var x = e.pageX - e.target.offsetLeft;
    alert(x);    
});

ฉันต้องการค้นหาตำแหน่งของเมาส์บนแถบค้นหา # เมื่อคลิก ฉันคิดว่ารหัสข้างต้นควรใช้งานได้ แต่ให้ผลลัพธ์ที่ไม่ถูกต้อง

— โรมัน
แหล่งที่มา

4

ตำแหน่งที่สัมพันธ์กับองค์ประกอบวิวพอร์ตหรือทั้งเอกสาร?

— เจมส์

ฉันทำให้มันใช้งานได้โดยใช้ e.layerX - e.target.offsetLeft และสำหรับ Oprea เพิ่งใช้ e.offsetX

— Roman

หากคุณต้องการรับมันบนไซต์ที่ตอบสนอง ลองดูบทความนี้คุณจะได้รับในเว็บไซต์ที่ตอบสนองเช่นกัน kvcodes.com/2014/03/…

— Kvvaradha

235

คุณกำลังพยายามหาตำแหน่งของตัวชี้เมาส์relativeไปยังองค์ประกอบ (หรือ) เพียงแค่ตำแหน่งตัวชี้เมาส์

ลองการสาธิตนี้: http://jsfiddle.net/AMsK9/

แก้ไข:

1) event.pageX, event.pageYช่วยให้คุณมีตำแหน่งของเมาส์เอกสารญาติ!

อ้างอิง : http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

2) offset(): ให้ตำแหน่งออฟเซ็ตขององค์ประกอบ

อ้างอิง : http://api.jquery.com/offset/

3) position(): ให้ตำแหน่งสัมพัทธ์ขององค์ประกอบเช่น

พิจารณาองค์ประกอบที่ฝังอยู่ภายในองค์ประกอบอื่น

ตัวอย่าง :

<div id="imParent">
   <div id="imchild" />
</div>

อ้างอิง : http://api.jquery.com/position/

HTML

<body>
   <div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>
   <div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>
   <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>

JavaScript

$(document).ready(function (e) {

    $('#A').click(function (e) { //Default mouse Position 
        alert(e.pageX + ' , ' + e.pageY);
    });

    $('#B').click(function (e) { //Offset mouse Position
        var posX = $(this).offset().left,
            posY = $(this).offset().top;
        alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
    });

    $('#C').click(function (e) { //Relative ( to its parent) mouse position 
        var posX = $(this).position().left,
            posY = $(this).position().top;
        alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
    });
});

9

+1 สำหรับตัวอย่าง ... โปรดทราบว่าฉันจะเพิ่มรหัสที่นี่ด้วยหากลิงก์ของคุณตายคำถามนี้จะไร้ประโยชน์ในอนาคตฉันจะใส่รหัสสำหรับแต่ละข้อและคำอธิบายสั้น ๆ ที่นี่ :)

— Nick Craver

2

มีวิธีที่ง่ายกว่าในการทำกรณีของ'#B': e.offsetXและe.offsetY. ฉันเดาว่าคุณต้องการแก้ไข ฉันอัปเดตซอที่นี่แล้ว ฉันพบวิธีแก้ปัญหานี้ขอบคุณโพสต์ขอบคุณมาก

— toto_tico

ขอบคุณเนื่องจากส่วนตัวสับสนกับ offset () และ position () สำหรับใครที่ต้องการคำชี้แจงเพิ่มเติมสามารถอ่านstackoverflow.com/questions/3202008/…เพื่อความสะดวก

— simongcc

ฉันกำหนดองค์ประกอบไว้ที่ด้านล่าง - นั่นคือความกว้าง 100% ดังนั้นฉันจึงใช้ความกว้างของหน้าต่างเป็น posX แทน - ดังนั้นฉันจึงสามารถตรวจสอบได้ว่าผู้ใช้คลิก "X" ที่สร้างด้วย a: after css rule ที่ อยู่ที่มุมขวาบน

— amurrell

เป็นตัวอย่างที่ดี แต่ไม่มีความชัดเจนว่าอะไรคือความแตกต่างระหว่าง .position () และ. offset () คุณควรรวมองค์ประกอบ #C ไว้ใน div พาเรนต์บางตำแหน่งด้วยตำแหน่งที่เป็นแบบอย่างเพื่อดูว่าการคลิกที่ #C ส่งคืนตำแหน่งเมาส์ของคุณภายในองค์ประกอบที่เป็นพาเรนต์ของ #C ซึ่งอาจมีประโยชน์น้อยที่สุด

— amik

15

$('#something').click(function (e){
    var elm = $(this);
    var xPos = e.pageX - elm.offset().left;
    var yPos = e.pageY - elm.offset().top;

    console.log(xPos, yPos);
});

— Nisar
แหล่งที่มา

3

ลองสิ่งนี้:

jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})

คุณสามารถค้นหาข้อมูลเพิ่มเติมได้ที่นี่ด้วย DEMO

— ครูนัล
แหล่งที่มา

1

คิดเป็นเปอร์เซ็นต์:

$('.your-class').click(function (e){
    var $this = $(this); // or use $(e.target) in some cases;
    var offset = $this.offset();
    var width = $this.width();
    var height = $this.height();
    var posX = offset.left;
    var posY = offset.top;
    var x = e.pageX-posX;
        x = parseInt(x/width*100,10);
        x = x<0?0:x;
        x = x>100?100:x;
    var y = e.pageY-posY;
        y = parseInt(y/height*100,10);
        y = y<0?0:y;
        y = y>100?100:y;
    console.log(x+'% '+y+'%');
});

— l2aelba
แหล่งที่มา

1

หากMouseEvent.offsetXจะได้รับการสนับสนุนจากเบราว์เซอร์ของคุณ (เบราว์เซอร์ที่สำคัญทั้งหมดจริงสนับสนุนมัน), The jQuery วัตถุที่จัดกิจกรรมจะมีคุณสมบัตินี้

คุณสมบัติอ่านอย่างเดียว MouseEvent.offsetX จัดเตรียมออฟเซ็ตในพิกัด X ของตัวชี้เมาส์ระหว่างเหตุการณ์นั้นและขอบช่องว่างของโหนดเป้าหมาย

$("#seek-bar").click(function(event) {
  var x = event.offsetX
  alert(x);    
});

— Memet Olsen
แหล่งที่มา

0

ดูที่นี่ป้อนคำอธิบายลิงก์ที่นี่

html

<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>

css

#myPosition{
  background-color:red;
  height:200px;
  width:200px;
}

jquery

$(document).ready(function(){
    $("#myPosition").click(function(e){
       var elm = $(this);
       var xPos = e.pageX - elm.offset().left;
       var yPos = e.pageY - elm.offset().top;
       alert("X position: " + xPos + ", Y position: " + yPos);
    });
});

— แอร์แบล็ค
แหล่งที่มา