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

最新推荐文章于 2021-11-03 08:58:14 发布

世态炎凉！！

最新推荐文章于 2021-11-03 08:58:14 发布

阅读量1.1k

点赞数 2

本文链接：https://blog.csdn.net/ws9029/article/details/103436753

版权

AngularJs 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

单击，双击事件相信大家应该很了解了，他们可以分别执行自己的事件，但是如果用一个元素的既有单击事件，又有双击事件，这种情况下，该如果实现各自的事件呢?看下面代码:

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;
};