點選事件 a標籤的href與click事件
阿新 • • 發佈：2022-03-21
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>js中的點選事件（click）的實現方式</title>
</head>
<body>
<!-- 第三種方式-->
<button id="btn" onclick="threeFn()">點我</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
// 第一種 通過點選事件
btn.onclick = function(){
alert("這是第一種點選方式");
}
// 第二種 監聽點選事件
btn.addEventListener('click', function(){
alert("這是第二中點選方式");
})
// 第三種 通過方法響應點選事件
function threeFn(){
alert("這是第三種點選方式");
}
</script>
</body>
</html>
a標籤的href與click事件
<a href='index.html' onclick='index()' >連結</a>
a標籤中如果同時存在href和onclick時，以上的寫法，onclick先執行，href後執行（頁面跳轉），但可能存在href跳轉時，click事件的處理程式還未生效；
禁止href執行的方法：
（1）href=‘javascript:void(0)’，這時只執行onclick事件，推薦在href不加連結時用；
（2）onclick執行，返回false，href不執行；
但是我們經常用href = ‘#’來簡寫空連結，點選a連結，‘#’會追加至url末尾；且頁面會置頂；