ล่าสุดการพัฒนาเว็บบทเรียน
×

JavaScript การอ้างอิง

ภาพรวม

JavaScript

JS เชือก JS จำนวน JS ผู้ประกอบการ JS งบ JS คณิตศาสตร์ JS วันที่ JS แถว JS บูลีน JS นิพจน์ทั่วไป JS สถานการณ์โดยรวม JS การแปลง

เบราว์เซอร์ BOM

Window Navigator Screen History Location

HTML DOM

DOM เอกสาร DOM องค์ประกอบ DOM แอตทริบิวต์ DOM เหตุการณ์ DOM รูปแบบ

HTML วัตถุ

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <td> <th> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

วัตถุอื่น ๆ

CSSStyleDeclaration


 

MouseEvent clientX Property

<object เหตุการณ์

ตัวอย่าง

ขาออกพิกัดของตัวชี้เมาส์เมื่อกดปุ่มเมาส์คลิกองค์ประกอบนี้:

var x = event.clientX;     // Get the horizontal coordinate
var y = event.clientY;     // Get the vertical coordinate
var coor = "X coords: " + x + ", Y coords: " + y;

ผลจากการ coor อาจจะ:

X coords: 142, Y coords: 99
ลองตัวเอง»

เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง


ความหมายและการใช้งาน

สถานที่ให้บริการ clientX กลับแนวนอนประสานงาน (according to the client area) ของตัวชี้เมาส์เมื่อเหตุการณ์เมาส์ถูกเรียก

พื้นที่ของลูกค้าคือหน้าต่างปัจจุบัน

เคล็ดลับ: การได้รับการประสานงานในแนวตั้ง (ตามพื้นที่ของลูกค้า) ของตัวชี้เมาส์ใช้ clientY คุณสมบัติ

หมายเหตุ: คุณสมบัตินี้ถูกอ่านอย่างเดียว


สนับสนุนเบราว์เซอร์

คุณสมบัติ
clientX ใช่ ใช่ ใช่ ใช่ ใช่

วากยสัมพันธ์

event .clientX

รายละเอียดทางเทคนิค

กลับค่า: จำนวนคิดเป็นแนวนอนพิกัดของตัวชี้เมาส์พิกเซล
DOM เวอร์ชัน: ระดับ DOM 2 เหตุการณ์

ตัวอย่าง

ตัวอย่างอื่น ๆ

ตัวอย่าง

ขาออกพิกัดของตัวชี้เมาส์ขณะที่การย้ายตัวชี้เมาส์มากกว่าองค์ประกอบนี้:

var x = event.clientX;
var y = event.clientY; 
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;
ลองตัวเอง»

ตัวอย่าง

การสาธิตความแตกต่างระหว่าง 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;
ลองตัวเอง»

หน้าเว็บที่เกี่ยวข้อง

อ้างอิง HTML DOM: MouseEvent clientY Property

อ้างอิง HTML DOM: MouseEvent screenX Property

อ้างอิง HTML DOM: MouseEvent screenY Property


<object เหตุการณ์