如何使双击而不是单击以角度打开文件答案

【问题标题】：How to make double click instead of single click to open file in angular如何使双击而不是单击以角度打开文件
【发布时间】：2019-03-26 10:22:04
【问题描述】：

这是一个拖放文件上传的角度。我可以通过两种方式上传文件，拖放或单击图标并选择并上传文件。

这里拖放不是问题。但是如果我单击加号图标，它将打开查找器（Windows 中的驱动器），我可以选择要上传的任何图像或文件。

每当我单击加号图标时，它都会打开查找器。但我只想在双击图标时打开查找器。如果单击它应该不允许打开查找器。

请找到以下用于文件上传的 stackblitz 示例。

stackblitz

<input-file placeholder="Pictures"
            fileAccept="image/*" 
            fileLimit="2"  
            (dblclick)="openFolder()"></input-file>

谁能帮我做这件事？

【问题讨论】：

很奇怪你会想要双击...唯一的解决方法就是捕获点击并取消它。
如果我第二次点击它会计为2。但这不是双击。所以它不会工作。我想双击打开文件夹。还有其他方法吗？

标签： html css angular angular5 angular6

【解决方案1】：

//可以使用变量“yet”。如果为真，则进行（单击）否则阻止默认

<input-file (click)="click($event)" (dblclick)="openFolder($event)" 
         placeholder="Drop files below!">
</input-file>

在你的.ts中

  yet:boolean=false; //A variable
  openFolder($event)
  {
    //create a mouseEvent 
    let event = new MouseEvent('click',{
    view: window,
    bubbles: true,
    cancelable: true
  });
    this.yet=true;  //equal variable to true
    var cancelled = !$event.target.dispatchEvent(event);
     this.yet=false;  //return the value to false
  }
  click($event)
  {
    if (!this.yet) //If variable is false
    {
      $event.preventDefault();
      return false;
    }
  }

【讨论】：

【解决方案2】：

一个快速的技巧是检查点击事件的时间：

<input-file fileAccept="image/*" fileLimit="2" placeholder="Pictures" (click)="openFolder()"></input-file>

private lastClick: number

openFolder () {
    const now = Date.now()

    // replace 1000 with whatever maximum interval you want to count as a double click
    if (now - this.lastClick < 1000) {
        // open the folder
    } else {
        this.lastClick = now
    }
}

【讨论】：

【解决方案3】：

您可以尝试在按钮的dataset 对象上存储按钮状态：

export class AppComponent { 
  button;

  click(ev) {
    if (ev.target.tagName === 'INPUT') {
      !this.button && (this.button = ev.target);
      if (!this.button.dataset.allowClick) {
        ev.preventDefault();
      }
      else {
        delete this.button.dataset.allowClick;
      }
    }
  }

  dblclick(ev) {
    this.button.dataset.allowClick = true;
    this.button.click();
  }
}

HTML：

<input-file (click)="click($event)" 
            (dblclick)="dblclick($event)"
            placeholder="Drop files below!"></input-file>

STACKBLITZ

【讨论】：