程式語言教學誌 FB, YouTube: PYDOING: HTML DOM 快速導覽 - 事件物件 event 的方法 preventDefault()

event.preventDefault() 方法觸發或取消事件預設發生情況。

舉例如下

function init(event) {
    show(event);
}
 
function show(event) {
    var s1 = document.getElementById("show1");
    s1.innerHTML = event.defaultPrevented;
    var s2 = document.getElementById("show2");
    s2.innerHTML = event.cancelable;
}
 
function preventDef(event) {
    event.preventDefault();
    show(event);
}
 
function run1(event) {
    var t = document.getElementById("checkbox");
    t.addEventListener("click", preventDef, false);
}
 
function run2(event) {
    var t = document.getElementById("checkbox");
    t.removeEventListener("click", preventDef, false);
    show(event);
}
 
/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：event005.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 */

此例在 preventDef() 函數 (function) 中呼叫 preventDefault()

function preventDef(event) {
    event.preventDefault();
    show(event);
}

我們以下面的 HTML 文件載入

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="event005.js" type="text/javascript"></script>
</head>
<body onload="init(event);">
<table><tr><td><input type="checkbox" id="checkbox"/>
<label for="checkbox">Checkbox</label></td><tr>
<tr><td>
<input type="button" value="Prevent" onclick="run1(event);">
</td><tr>
<tr><td>
<input type="button" value="Cancel" onclick="run2(event);">
</td><tr></table>
<div>defaultPrevented: <span id="show1"></show></div>
<div>cancelable: <span id="show2"></show></div>
</body>
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：event005.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 -->

瀏覽器 (broswer) 開啟，點擊 Prevent 後，事件的預設發生情況就會被抑制，因此無法選擇 Checkbox

中英文術語對照
函數	function
瀏覽器	broswer

您可以繼續參考

事件物件 event

屬性

event.altKey

event.button

event.cancelable

event.charCode

event.clientX

event.clientY

event.ctrlKey

event.defaultPrevented

event.detail

event.keyCode

event.layerX

event.layerY

event.metaKey

event.screenX

event.screenY

event.shiftKey

event.type

event.view

event.which

方法

event.preventDefault()