angularjs和js中同一個元素上如何實現ng-click（onclick），ng-dblclick(ondblclick)事件

單擊，雙擊事件相信大家應該很瞭解了，他們可以分別執行自己的事件，但是如果用一個元素的既有單擊事件，又有雙擊事件，這種情況下，該如果實現各自的事件呢?看下面代碼:

html代碼：

 <button onclick="single(event)" ondblclick="double(event)">按鈕</button>

js代碼：

var time = 200;
var timeOut = null;

function single(e) {
   clearTimeout(timeOut); // 清除第一個單擊事件
   timeOut = setTimeout(function () {
       console.log('單擊');
       // 單擊事件的代碼執行區域
       // ...
   }, time)

};

function double(e) {
   clearTimeout(timeOut); // 清除第二個單擊事件
   // console.log('雙擊')
   // // 雙擊的代碼執行區域
   // // ...
   console.log('雙擊')
};

主要用到setTimeout事件和清除次事件clearTimeout，首先，正常情況，每次雙擊會觸發兩次單擊的，因爲它不清楚你到底是雙擊還是單擊，所以我們要把雙擊和單擊區分出來，這裏用到了一個時間間隔，也就2次單擊的時間間隔，如果單擊的時間小於我設定的時間，那麼我會認爲它是個雙擊，需要把兩次的單擊事件全部清除掉，看點擊事件裏面，首先清除了上一個單擊事件，當如果單擊的時間小於我設定的時間，會進入雙擊事件裏面，在雙擊事件裏面我首先也把上一個單擊事件清除，這樣就把兩次單擊事件都清除了！這樣就可以區分雙擊和單擊事件！

我實際做的項目中效果是上傳pdf文件之後，我單擊這個pdf圖片是選中這個pdf文件，雙擊是預覽pdf 文件！
我截取部分html代碼：

<div ng-class="{'single-file-selected' : $index === ctrl.singleIndex,'multiple-file-selected':file.checked}"
   ng-click="ctrl.selectedFile(file,$index)" ng-dblclick='ctrl.filePreview(file)'
   ng-style="{'background-image': file.fileName===undefined ? none:'url(/file/file/{{file.fileName | deletePdf }}.png)'}">
   <div class="delete-div" ng-click="ctrl.singleDelete($event,file,$index)"
       ng-show='file.fileName && ctrl.singleSelected'>
       <i class="delete-icon"></i>
   </div>
   <i class="icon-multiple"></i>
   <!-- <input type="checkbox" ng-model="file.checked" class="checkboxs"> -->
   <div class="shade" ng-show='file.checked'></div>
</div>

你只需要看到我repeat出來的file 上有個ng-click（選中）和ng-dblclick（預覽）
下面是js代碼：

/**
* @param {Object} selectedFile 選中文件數據
* @param {Int} index 選中文件index
* @description 單擊圖片選中文件,再次單擊選中的圖片則會取消選中
*/
ctrl.selectedFile = function (selectedFile, index) {
   clearTimeout(timeOut); // 清除第一個單擊事件
   timeOut = $timeout(function () {
       ctrl.singleSelected ? singleSelectedFun(selectedFileList, ctrl.singleIndex, selectedFile, index) : multipleSelectedFun(selectedFileList, selectedFile, index)
   }, time);
};




//雙擊圖片,文件預覽
ctrl.filePreview = function (file) {
   //調用$window.open 打開PDF預覽
   clearTimeout(timeOut); // 清除第二個單擊事件
   file ? window.open(file.url) : file;
};

好了說到這裏都已經說的差不多了，有不正的地方請指正，不勝感激！！歡樂的時光總是過得特別快,又到時候和大家講拜拜！！