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

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

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

有关更多信息，请参见

jQuery API Reference - event.type

AngularJS，区分拖动和单击事件，并将数据传递给单击事件

1 个答案: