จะจำลองการคลิกโดยใช้พิกัด x, y ใน JavaScript ได้อย่างไร?


98

เป็นไปได้หรือไม่ที่จะใช้พิกัดที่กำหนดเพื่อจำลองการคลิกใน JavaScript ภายในหน้าเว็บ


2
เป้าหมายของคุณคืออะไร? :) คุณกำลังพยายามจำลองการคลิกบนแผนที่รูปภาพหรือไม่?
Nick Craver

คำตอบ:


151

คุณสามารถส่งเหตุการณ์การคลิกได้แม้ว่าจะไม่เหมือนกับการคลิกจริง ตัวอย่างเช่นไม่สามารถใช้เพื่อหลอกล่อเอกสาร iframe ข้ามโดเมนให้คิดว่ามีการคลิก

เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับdocument.elementFromPointและHTMLElement.prototype.click()ตั้งแต่อย่างน้อย IE 6, Firefox 5, Chrome เวอร์ชันใดก็ได้และอาจเป็นเวอร์ชันใดก็ได้ของ Safari ที่คุณน่าจะสนใจ มันจะไปตามลิงค์และส่งแบบฟอร์ม:

document.elementFromPoint(x, y).click();

https://developer.mozilla.org/En/DOM:document.elementFromPoint https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click


1
@RadiantHex: ใช่อันที่จริง IE เป็นคนแรกที่ใช้งานได้และจะกลับไปที่ IE6 การใช้งาน Chrome, Firefox และ Safari 5 นั้นใช้ได้ แต่ Safari 4 และ Opera ไม่ถูกต้อง (แม้ว่าจะใช้งานได้) ดูquirksmode.org/dom/w3c_cssom.html#documentview
Andy E

1
ดีใจสุด ๆ กับการค้นพบครั้งนี้ !! = D ทำให้หลายสิ่งที่คิดว่าเป็นไปไม่ได้ในตอนนี้ =) ... หรืออย่างน้อยก็ซับซ้อนน้อยลง ขอบคุณ !!
RadiantHex

1
สิ่งนี้ดูเหมือนจะใช้กับเหตุการณ์ $ .live () ไม่ได้มีใครจะทำให้มันทำงานกับเหตุการณ์ที่สร้างด้วย $ .live () ได้ด้วยหรือไม่?
ActionOwl

1
@AndyE ตอนนี้กำลังทำงานในเงื่อนไขต่อไปนี้: ฉันมีหน้าเว็บฉันกำลังโหลด Iframe จากโดเมนอื่นที่ไม่ใช่โดเมนของฉัน และฉันต้องการคลิกในพื้นที่ iframe คุณมีวิธีแก้ปัญหาเกี่ยวกับเรื่องนี้หรือไม่?
Parixit

2
@parixit: ไม่มันเป็นไปไม่ได้ คุณสามารถจำลองการคลิกบน iframe ได้ แต่จะเผยแพร่เอกสารที่มีอยู่ ไม่มีสิ่งใดในเอกสารที่มีอยู่จะได้รับผลกระทบ (ด้วยเหตุผลด้านความปลอดภัยที่ชัดเจนมาก)
Andy E

69

ได้คุณสามารถจำลองการคลิกเมาส์ได้โดยสร้างเหตุการณ์และส่งไป:

function click(x,y){
    var ev = document.createEvent("MouseEvent");
    var el = document.elementFromPoint(x,y);
    ev.initMouseEvent(
        "click",
        true /* bubble */, true /* cancelable */,
        window, null,
        x, y, 0, 0, /* coordinates */
        false, false, false, false, /* modifier keys */
        0 /*left*/, null
    );
    el.dispatchEvent(ev);
}

ระวังการใช้clickวิธีการกับองค์ประกอบ - มันถูกนำไปใช้อย่างกว้างขวาง แต่ไม่ได้มาตรฐานและจะล้มเหลวในเช่น PhantomJS ฉันถือว่าการใช้ jQuery .click()ทำในสิ่งที่ถูกต้อง แต่ยังไม่ได้รับการยืนยัน


ช่วยฉันจากความยุ่งเหยิง วิธีการเริ่มต้นของฉันล้มเหลว แต่วิธีนี้ช่วยได้ขอบคุณ
iChux

3
plus1 สำหรับไม่ใช้ jQuery ในตรงกันข้ามกับคำตอบที่ได้รับการยอมรับคนนี้ไม่ตอบคำถาม
tomekwi

1
นี่มีพลังมากกว่า jQuery's มาก$.click()
Steven Lu

7
initMouseEventเลิกใช้แล้ว: developer.mozilla.org/en-US/docs/Web/API/MouseEvent/…
vikeri

3
แทนการเลิกinitMouseEventคุณสามารถใช้var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )นี้ยังแสดงให้เห็นในstackoverflow.com/a/36144688/384670
M Katz


0

มันใช้ได้ดีที่สุดสำหรับฉัน แต่มันพิมพ์องค์ประกอบที่ถูกต้องไปยังคอนโซล

นี่คือรหัส:

function click(x, y)
{
    var ev = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
        'cancelable': true,
        'screenX': x,
        'screenY': y
    });

    var el = document.elementFromPoint(x, y);
    console.log(el); //print element to console
    el.dispatchEvent(ev);
}
click(400, 400);

-2

ด้วยเหตุผลด้านความปลอดภัยคุณไม่สามารถเลื่อนตัวชี้เมาส์ด้วยจาวาสคริปต์หรือจำลองการคลิกด้วยจาวาสคริปต์ได้

อะไรคือสิ่งที่คุณพยายามทำให้สำเร็จ?


@Aicule: ขอบคุณที่แจ้งให้เราทราบ! ฉันจะเพิ่มข้อมูลเล็กน้อยให้กับคำถาม ฉันแค่ทดลองไม่มีอะไรได้ผลจริงๆ =)
RadiantHex

2
ใน Chrome และ Safari คุณสามารถคลิกที่ตำแหน่ง x, y ที่ต้องการได้ นี่คือวิธีการทำงานของการสาธิตนี้ Firefox เป็นเบราว์เซอร์เดียวที่ล้มเหลวดังนั้นอาจเป็นนโยบายความปลอดภัยเฉพาะของ Firefox
thdoan

ความจริงอยู่ในคำตอบด้านล่างcreateEvent()+initMouseEvent()
Valer

1
ในกรณีของฉันการทดสอบ
Jose Nobile

คุณสามารถจำลองการคลิกด้วยพิกัด X / Y ที่ระบุได้อย่างแน่นอนแม้ว่าจะไม่ทำงานในลักษณะเดียวกัน
Agamemnus
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.