Question

我的问题是，当我执行“双击”时会触发用于这两个事件的方法

例如，我需要在触发特定事件时执行特定功能。

<a (click)="method1()" (dblclick)="method2()">

当我执行“双击”时，method1()和method2()都会被触发。

Answer 1

您可以使用超时和布尔标志来解决此问题。请考虑以下事项：

DOM需要几毫秒来识别双击。

但是它确定它识别出双击但第一次点击也被识别出来了。

所以逻辑是这样的。

isSingleClick: Boolean = true;     

method1CallForClick(){
   this.isSingleClick = true;
        settimeout(()=>{
            if(this.isSingleClick){
                 doTheStuffHere();
            }
         },250)
}
method2CallForDblClick(){
         this.isSingleClick = false;
         doTheStuffDblClickHere();
}

在元素的click事件中，在元素和方法2的click事件中调用方法一。

Answer 2

class ViewController: UIViewController {

    @IBAction func btnTapped(_ sender: Any) {
        let picker = UIPrinterPickerController(initiallySelectedPrinter: nil)
        picker.delegate = self
        picker.present(animated: true) { (controller, complete, error) in
            print("done")
        }
    }
}

// MARK:- UIPrinterPickerControllerDelegate
extension ViewController: UIPrinterPickerControllerDelegate {
    func printerPickerControllerParentViewController(_ printerPickerController: UIPrinterPickerController) -> UIViewController? {
        return self
    }
}

Answer 3

您可以使用纯JavaScript回调dblclick，或者在角度2中使用(dblclick)="doubleClickFunction()"。

如果你在同一个元素上同时拥有（click）和（dblclick），你应该为你的click事件回调添加一个超时，以避免在用户双击时调用它。

尝试类似：

html的：

<button (click)="singleClick()" (dblclick)="doubleClick()">click</button>

的.js：

singleClick(): void{
    this.timer = 0;
    this.preventSimpleClick = false;
    let delay = 200;

    this.timer = setTimeout(() => {
      if(!this.preventSimpleClick){
        ...
      }
    }, delay);

  }

  doubleClick(): void{
    this.preventSimpleClick = true;
    clearTimeout(this.timer);
    ...
  }

Answer 4

It needs simple work-round to block single click then do double click.  Check this example

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{title}}</h2>
        <button (click)="singleClick($event)" (dblclick)="doubleClick( $event)"> Click </button>
    </div>
  `,
})
export class App {
  title:string;
  preventSingleClick = false;
  timer: any;
  delay: Number;
  constructor() {
    this.title = `Angular (click) and (dblclick)`
  
  }
  
  singleClick(event) {
    this.preventSingleClick = false;
     const delay = 200;
      this.timer = setTimeout(() => {
        if (!this.preventSingleClick) {
           alert('Single Click Event');
        }
      }, delay);
  }
  
  doubleClick () {
    this.preventSingleClick = true;
    clearTimeout(this.timer);
    alert('Double Click Event')
  }
}

[plunker] [1]

  [1]: http://plnkr.co/edit/pbsB0zYQCEY4xrPKngrF?p=preview

Answer 5

我刚刚为此创建了简单的解决方案。这里是模板：

<button (click)="myFunction()">Click me!</button>

下面是脚本：

justClicked = false;
doubleClicked = false;

myFunction() {
  if (this.justClicked === true) {
    this.doubleClicked = true;
    this.doubleClick();
  } else {
    this.justClicked = true;
    setTimeout(() => {
      this.justClicked = false;
      if (this.doubleClicked === false) {
        this.singleClick();
      }
      this.doubleClicked = false;
    }, 500);
  }
}

singleClick() {
  console.log('single');
}

doubleClick() {
  console.log('double');
}

Answer 6

这更干净

我找到了使用rxjs的解决方案，请尝试

我的模板有

<div #divElement></div>

我在我的component.ts中

  @ViewChild('divElement') el: ElementRef;

  ngAfterViewInit(): void {
    this.handleClickAndDoubleClick();
  }

  handleClickAndDoubleClick(){
    const el = this.el.nativeElement;
    const clickEvent = fromEvent<MouseEvent>(el, 'click');
    const dblClickEvent = fromEvent<MouseEvent>(el, 'dblclick');
    const eventsMerged = merge(clickEvent, dblClickEvent).pipe(debounceTime(300));
    eventsMerged.subscribe(
      (event) => {
        if(event.type === 'click'){
          //click
        }

        //dblclick
      }
    );

Answer 7

这是我双击角形的方法

clickme()
{
  this.count++;
  if(count%2==0)
  { this.doubleclickme(); }
}
this.count is a global variable .
this.doubleclickme() is a an other function in the component .

Answer 8

itemClicked(event: MouseEvent) {
    if (event.type == 'click') {
       
    }
  }

  itemdblClicked(event: MouseEvent) { 
    if (event.type.toLowerCase() == 'dblclick') {
      
    }
  }

如何使用typescript处理同一个html DOM元素上的“单击”和“双击”：Angular 2或4？

8 个答案: