AngularJS，区分拖动和点击事件，给点击事件传递数据

Question

我正在使用插件wheelZoom 使用鼠标滚轮进行滚动和缩放。现在我正在尝试添加通过单击在新选项卡中打开图像的功能。问题是在dragging 时，会引发click 事件。我需要隔离 drag 和 click 事件以启用不同的功能。我找到了一种方法来确定 drag 和 click 是什么。如何将event 或当前点击的对象传递给处理点击的函数？

TS：

constructor(private $element: ng.IRootElementService) {
    angular.element(function () {
        const element = angular.element( document.querySelector( '#imageZoom' ) );
        let drag = false;
        element.bind('mousedown', () => drag = false);
        element.bind('mousemove', () => drag = true);
        element.bind('mouseup', () => console.log(drag ? 'drag' : this.openImgNewTab(noteObj)));

    });
}

private openImgNewTab(noteObj){
   //pass the event and\or the object that was clicked on?
   //...
  //.. open the image of the note in a new tab using noteObj.path

}

HTML：

<image-zoom class="thumbnail"
            id="imageZoom"
            image-url="{{ $ctrl.options.note.url}}">
</image-zoom>

Answer 1

要区分事件类型，请使用event 对象的type 属性：

element.on('mousedown mousemove mouseup click', (event) => {
    console.log(event.type);
});

有关详细信息，请参阅

• jQuery API Reference - event.type