本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

HTML DOM 快速導覽 - 元素的事件處理屬性 ondblclick

如果網頁的元素 (element) 有設定 ondblclick 屬性 (attribute) ,快速的點擊兩次就會觸發 ondblClick 事件。



舉例如下
function run() {
    var s = document.getElementById("show");
    s.innerHTML = "Double clicked!";
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:event021.js
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2011 年 8 月 */


如果快速的點擊兩次,網頁會在 id 屬性為 show 的元素中印出提示訊息 Double clicked!
var s = document.getElementById("show");
s.innerHTML = "Double clicked!";


我們以下面的 HTML 文件載入
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="event021.js" type="text/javascript"></script>
</head>
<body>
<div ondblclick="run();">There is no spoon.</div>
<div id="show"></div>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:event021.html
     功能:示範 JavaScript 程式 
     作者:張凱慶
     時間:西元 2011 年 8 月 -->


其中的 <div> 元素設置 ondbclick 屬性,快速的點擊兩次之後就會執行 run()
<div ondblclick="run();">There is no spoon.</div>


瀏覽器 (broswer) 開啟網頁檔案,網頁有一句英文 There is no spoon.



點擊 There is no spoon. 的地方,網頁就會印出 提示訊息Double clicked!



中英文術語對照
元素element
屬性element
瀏覽器broswer


您可以繼續參考
HTML 元素的事件處理屬性


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/element.onclick
http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#elements-in-the-dom

沒有留言: