ການຄຳຕອບກັບ MouseEvent clientX

DOM 事件 MouseEvent

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

ເວລາທີ່ມິດສະໝອງຖືກກະຕຸ້ນ, ການສະໜັບສະໜູນ clientX ສະແດງຈຳນວນຕາມຈຸດມິດສະໝອງທີ່ຢູ່ທາງຕາມລະຫວ່າງ (ອີງຕາມຂອງມິດສະໝອງ).

ຂອງມິດສະໝອງຂອງປ້ອງກັນຄວາມສະໜັບສະໜູນ.

ຄຳແນະນຳ:ສຳລັບຮຽກຮ້ອງຈຳນວນຕາມຈຸດມິດສະໝອງທີ່ຢູ່ທາງພາກຕາມ (ອີງຕາມຂອງມິດສະໝອງ), ກະຕຸ້ນໃຊ້: ປະສານທີ່ clientY.

ຄວາມຄິດສັບສັນ:ການສະໜັບສະໜູນພຽງແຕ່ອ່າງຢູ່.

ຄວາມຄິດຈິງ

ຕົວຢ່າງ 1

ສະແດງຈຳນວນຕາມຈຸດມິດສະໝອງເວລາທີ່ປະຕິບັດການຄຳລະບາຍປະຕູມິດສະໝອງ.

var x = event.clientX;     // ຮຽກຮ້ອງຈຳນວນຕາມຈຸດມິດສະໝອງທີ່ຢູ່ທາງຕາມລະຫວ່າງ.
var y = event.clientY;     // ຮຽກຮ້ອງຈຳນວນຕາມຈຸດມິດສະໝອງທີ່ຢູ່ທາງພາກຕາມ.
var coor = "X coords: " + x + ", Y coords: " + y;

ທ້າທາຍດີຕະຫຼອດຕົວເອງ

ຕົວຢ່າງ 2

ສະແດງຈຳນວນຕາມຈຸດມິດສະໝອງເວລາທີ່ມິດສະໝອງຕິດຢູ່ໃສ່ສິ່ງຂອງ.

var x = event.clientX;
var y = event.clientY; 
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;

ທ້າທາຍດີຕະຫຼອດຕົວເອງ

ຕົວຢ່າງ 3

ສະແດງຄວາມແຕກຕ່າງລະຫວ່າງ clientX ແລະ clientY ແລະ screenX ແລະ screenY:

var cX = event.clientX;
var sX = event.screenX;
var cY = event.clientY;
var sY = event.screenY;
var coords1 = "client - X: " + cX + ", Y coords: " + cY;
var coords2 = "screen - X: " + sX + ", Y coords: " + sY;

ທ້າທາຍດີຕະຫຼອດຕົວເອງ

ສັບສັນ

event.clientX

ລະອຽດດ້ານເຕັກນິກ

ຄຳຕອບກັບ: ຈຳນວນທີ່ສະແດງຄວາມນັບແຈ້ງຂອງຄຳປະຈຳມິດສະໝອງຂອງຄຳປະຈຳມິດສະໝອງຈຸດສະໝອງຂອງມິດສະໝອງທີ່ມີຈຳນວນຕາມຖີວິດ.
DOM ລະດັບ: DOM Level 2 Events

ການສະໜັບສະໜູນບັນຊີຍາການ

ມະນາການ Chrome IE Firefox Safari Opera
clientX 支持 支持 支持 支持 支持

相关页面

HTML DOM 参考手册：ປະສານທີ່ clientY ຂອງ MouseEvent

HTML DOM 参考手册：ປະສານທີ່ screenX ຂອງ MouseEvent

HTML DOM 参考手册：ປະສານທີ່ screenY ຂອງ MouseEvent

HTML DOM 参考手册：ປະສານທີ່ offsetX ຂອງ MouseEvent

HTML DOM 参考手册：ປະສານທີ່ offsetY ຂອງ MouseEvent

DOM 事件 MouseEvent