dojo/on (double click)

簡介

當一個圖形介面元件需要同時用到點按 (click) 及雙點按(double click) 時，常常會碰到一件很惱人的事；也就是每次雙點按時，都會產生三次事件，二次點按，然後一次雙點按。這是因為每次點按之間的逾時值 (timeout) 太短；所以有人建議同一個圖形介面元件上不要同時實作點按和雙點。或者，透過延長點按與點按之間的逾時值來解決這個問題。同一個圖形介面元件上，是可以同時實作點按和雙點按的。

範例

範例中建立一個灰色方塊，同時在方塊上實作點按及雙點按兩種功能。每次點按或雙點按時，都會出現視窗顯示點按的型態。

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    width:1000px;
    height:100%;
    padding-top:20px;
}
.box {
    box-sizing:box-sizing;
    width:200px;
    height:200px;
    border:3px solid gray;
    background-color: #EEEEEE;
}
.box:hover {
    cursor:pointer;
}
</style>

CSS 中.box 定義方塊的樣式，在游標移到方塊上方時，改變游標的樣式。

HTML

<body class="claro">
    
</body>

HTML 中只需定義一個方塊的掛載點。

Script

第 20~22 行建立點按 (click) 事件的監聽和處理。
第 23~25 行建立雙點按 (double click) 事件的監聽和處理。
第 27 行的 clickDelay 是點按和點按之間的逾時值，也就是說，在這個時間內，如個碰到兩個點按，則視為雙點按；如果二個點按之間的間隔時間，長於 clickDelay 的值，則視為兩次的點按。
第 28 行設定一個 clickTimer 變數，在逾時值滿足後，呼叫處理函式。
第 29~38 行為點按的處理函式。
第 39~47 行為雙點按的處理函式。

熊伯的外接硬碟

2015年10月31日星期六