js จำลองการคลิกและส่งแบบฟอร์มเป็นตัวอย่าง ซึ่งเข้ากันได้กับเบราว์เซอร์ทั่วไป

ในการพัฒนาแอปพลิเคชันจริง เรามักจะใช้เหตุการณ์โมดูล JS แต่บางครั้งเราพบปัญหาบางอย่าง เช่น เหตุการณ์การคลิก สำหรับตัวอย่างง่ายๆ ให้คลิกปุ่ม "ส่ง" นอกแบบฟอร์มเพื่อส่งแบบฟอร์ม มาเขียนโค้ดกันเถอะ

HTML:

คัดลอกรหัสรหัสดังต่อไปนี้:

<h3> โปรดคลิก "ส่ง" และเหตุการณ์การคลิกของปุ่มทดสอบการส่งก็จะถูกทริกเกอร์เช่นกัน </h3>

<button id="btn">ส่ง</button>

<การกระทำของแบบฟอร์ม = "#" วิธีการ = "get" id = "แบบฟอร์ม">

<input type="text" name="site" value="www.woiweb.net" อ่านอย่างเดียว/>

<input id="subbtn" type="submit" value="อย่าคลิกปุ่มนี้เพื่อส่ง" onclick="alert('ฉันได้ส่ง');"/>

</แบบฟอร์ม>

จาฟสคริปต์:

คัดลอกรหัสรหัสดังต่อไปนี้:

<script type="text/javascript">

var sub = document.getElementById("subbtn");

var btn = document.getElementById("btn");

//วิธีการทั่วไป

btn.onclick = ฟังก์ชั่น() {

ย่อยคลิก();

-

</สคริปต์>

หลังจากทดสอบแล้วไม่มีปัญหากับ IE, FF, Chrome, Opera และ Safari และสามารถส่งแบบฟอร์มได้ตามปกติ

แต่ในการออกแบบจริง เพื่อให้ปุ่มส่งดูดีขึ้น ผู้สร้างมักจะใช้แท็กเพื่อประมวลผลและเพิ่มภาพพื้นหลังเพื่อจำลองปุ่ม เรายังคงใช้แนวคิดข้างต้นเพื่อลองเพิ่มแท็กเพื่อให้ส่ง . แบบฟอร์มเราแก้ไขเฉพาะ html เท่านั้น

HTML:

คัดลอกรหัสรหัสดังต่อไปนี้:

<h3> โปรดคลิก "ส่ง" และเหตุการณ์การคลิกของปุ่มทดสอบการส่งก็จะถูกทริกเกอร์เช่นกัน </h3>

<button id="btn">ส่ง</button>

<รูปแบบการกระทำ = "#" วิธีการ = "รับ" id = "แบบฟอร์ม">

<input type="text" name="site" value="www.woiweb.net" อ่านอย่างเดียว/>

<!--<input id="subbtn" type="submit" value="อย่าคลิกปุ่มนี้เพื่อส่ง" onclick="alert('ฉันได้ส่ง');"/> -->

<a id="subbtn" href="javascript:;" onclick="alert('Call the method to send the form here')">จำลองปุ่มส่ง</a>

</แบบฟอร์ม>

จาวาสคริปต์:

คัดลอกรหัสรหัสดังต่อไปนี้:

<script type="text/javascript">

var sub = document.getElementById("subbtn");

var btn = document.getElementById("btn");

//วิธีการทั่วไป

btn.onclick = ฟังก์ชั่น() {

ย่อยคลิก();

-

</สคริปต์>

หลังจากรัน ปัญหาก็เกิดขึ้น IE, FF และ Opera ก็โอเค แต่ Chrome และ Safari ไม่สามารถทำงานได้ตามปกติ ต่อมา ฉันค้นหาทางออนไลน์และพบว่าป้ายกำกับไม่มีเหตุการณ์ onclick() เหมือนกับปุ่ม วิธีแก้ปัญหาสำหรับ IE และ FF เขียนตรรกะที่แตกต่างกัน รหัส JS จะเป็นดังนี้:

จาวาสคริปต์:

คัดลอกรหัสรหัสดังต่อไปนี้:

<script type="text/javascript">

var sub = document.getElementById("subbtn");

var btn = document.getElementById("btn");

//วิธีการทั่วไป

btn.onclick = ฟังก์ชั่น() {

//sub.คลิก();

ถ้า (/msie/i.test(navigator.userAgent)) //IE

-

sub.fireEvent("onclick");

} อื่น {

var e = document.createEvent('MouseEvent');

e.initEvent('คลิก', เท็จ, เท็จ);

sub.dispatchEvent(e);

-

-

</สคริปต์>

เมื่อมาถึงจุดนี้ปัญหาก็ได้รับการแก้ไขแล้ว แม้ว่าปัญหานี้จะง่ายมาก แต่ทุกคนก็มองข้ามไปได้อย่างง่ายดาย

ไวยากรณ์:

createEvent(ประเภทเหตุการณ์)

คำอธิบายพารามิเตอร์

eventType คือชื่อโมดูลเหตุการณ์ของออบเจ็กต์เหตุการณ์ที่คุณต้องการรับ ดูส่วนคำอธิบายสำหรับรายการประเภทเหตุการณ์ที่ถูกต้อง

ส่งกลับค่า

ส่งคืนวัตถุเหตุการณ์ที่สร้างขึ้นใหม่ของประเภทที่ระบุ

โยน

หากการใช้งานรองรับประเภทเหตุการณ์ที่ต้องการ เมธอดนี้จะส่ง DOMException พร้อมโค้ด NOT_SUPPORTED_ERR

แสดงให้เห็น

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

ตารางต่อไปนี้แสดงรายการค่าทางกฎหมายสำหรับ eventType และอินเทอร์เฟซเหตุการณ์ที่สร้างโดยแต่ละค่า:

วิธีการเริ่มต้นอินเทอร์เฟซเหตุการณ์พารามิเตอร์

HTMLEvents HTMLEvent iniEvent()

เหตุการณ์เมาส์ MouseEvent iniMouseEvent()

UIEvents UIEvent iniUIEvent()

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

จริงๆ แล้ววิธีนี้ไม่ได้ถูกกำหนดโดยอินเทอร์เฟซเอกสาร แต่โดยอินเทอร์เฟซ DocumentEvent หากการใช้งานสนับสนุนโมดูลเหตุการณ์ อ็อบเจ็กต์ Document จะใช้อินเทอร์เฟซ DocumentEvent และสนับสนุนวิธีนี้