角度（2/4）：选择文字会触发点击事件

Question

如果元素具有(click)处理程序，并且您在该元素中选择了一些文本，则将(click)调用该处理程序。有办法防止这种情况吗？这是说明问题的Plunkr。相关代码：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 (click)="handleClick()">Click or select this text</h2>
    </div>
  `
})
export class App {
  public handleClick() {
    alert('you clicked');
  }
}

Answer 1

将点击事件 ( $event) 传递给handleClick方法

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 (click)="handleClick($event)">Click or select this text</h2>
    </div>
  `
})

然后使用以下代码获取选择类型：

export class App {
  public handleClick(event) {
    if (event.view.getSelection().type !== 'Range') {
      alert('you clicked');
    }
  }
}

或者：

export class App {
  public handleClick(event) {
    if (event.view.getSelection().toString().length === 0) {
      alert('you clicked');
    }
  }
}

Plunker 演示：https ://plnkr.co/edit/PEPyPzDkFjweyAHK8Tj6 ? p = preview

Answer 2

使用此代码

public handleClick() {
  var selection = window.getSelection();
  if(selection.toString().length === 0) {
      alert('you clicked');
  }

}