ทั้ง onclick และ href มีพฤติกรรมต่างกันเมื่อเรียก JavaScript โดยตรง นอกจากนี้ สคริปต์ใน href จะไม่ทำงานหากช่วงเวลาระหว่างการคลิกสองครั้งสั้นเกินไป นี่คือเวลาระหว่างการคลิกสองครั้ง (double-click timing)
ตัวอย่าง
ตัวอย่างการใช้งาน href เทียบกับ onClick ใน JavaScript:
<html>
<head>
<title>JavaScript href vs onClick()</title>
<script>
function myFunc() {
var v = 0;
for (var j=0; j<1000; j++) {
v+=j;
}
alert(v);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>
</head>
<body>
</body>
</html>
ความแตกต่างสำคัญ
- href="javascript:...": ทำงานเหมือนลิงก์ ปลายทางคือโค้ด JS อาจก่อให้เกิดปัญหาเรื่อง accessibility และ SEO
- onclick: แยก“行為” (behavior) ออกจาก "โครงสร้าง" (structure) ตรงตามหลัก Unobtrusive JavaScript
- แนะนำ: ใช้
<button>หรือ<a>พร้อมaddEventListenerแทนการเขียน inline handler
