ng-click(onclick)イベントとng-dblclick(ondblclick)イベントをangularjsとjsの同じ要素に実装する方法



How Implement Ng Click



クリック、ダブルクリックイベント誰もが理解すべきだと思います。彼らは独自のイベントを実行できますが、要素のクリックイベントとダブルクリックイベントの両方を使用する場合、この場合、独自のイベントを実装するにはどうすればよいですか?以下のコードを見てください。

HTMLコード:

<button onclick='single(event)' ondblclick='double(event)'>Button</button>

jsコード:



var time = 200 var timeOut = null function single(e) { clearTimeout(timeOut) // Clear the first click event timeOut = setTimeout(function () { console.log('Click') // Code execution area of ​​click event // ... }, time) } function double(e) { clearTimeout(timeOut) // Clear the second click event // console.log ('double click') // // Double-clicked code execution area // // ... console.log('Double click') }

主に使用されるsetTimeoutイベントとcleartimeイベントclearTimeoutまず、通常の状況では、ダブルクリックするかクリックするかが明確でないため、通常の状況では、ダブルクリックごとに2回のクリックがトリガーされます。したがって、ダブルクリックとを区別する必要があります。クリック、ここでは時間間隔、つまり2クリックの時間間隔が使用されます。クリック時間が設定した時間より短い場合は、ダブルクリックだと思います。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/{ 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>

繰り返すファイルにng-click(選択済み)とng-dblclick(プレビュー)があることを確認する必要があります
以下はjsコードです。

/** * @param {Object} selectedFile selected file data * @param {Int} index selected file index * @description Click the picture to select the file, click the selected picture again to cancel the selection */ ctrl.selectedFile = function (selectedFile, index) { clearTimeout(timeOut) // Clear the first click event timeOut = $timeout(function () { ctrl.singleSelected ? singleSelectedFun(selectedFileList, ctrl.singleIndex, selectedFile, index) : multipleSelectedFun(selectedFileList, selectedFile, index) }, time) } // Double-click the picture, file preview ctrl.filePreview = function (file) { // Call $ window.open to open the PDF preview clearTimeout(timeOut) // Clear the second click event file ? window.open(file.url) : file }

さて、ここで言われていることの多くは、間違いがあれば訂正してください、ありがとう! !幸せな時間はいつもとても速く過ぎます、そしてそれから私は皆に別れを告げます! !