Ngx-drag-scroll: 拖放后立即防止点击传播

@Sprauch
感谢您报告此问题，您愿意为此错误做 PR 吗？

不，我对此还是有点太新了。 不到 18 个月前开始在 Angular 中进行开发，并于昨天加入 GitHub ;)

不用担心，我会在有时间的时候尝试修复它。

嘿伙计们，我也有这个问题，修复/变通有什么进展吗？

嘿@stuart-clark-45

我正在为 v2.0 发布版本，希望这个问题届时会消失。 如果没有，我会回来修复它。

@bfwg太好了，非常感谢，除了这个错误之外，非常好的小库。 你知道什么时候发布 v2.0 吗？

@斯图尔特-克拉克-45

没问题，2.0 的进度可以在#66 #68 中跟踪。 经过一番调查，这个问题比我预期的更难解决。 我会尝试在 2.0 发布后立即创建一个新的 PR 来修复它。 抱歉耽搁了。

@bfwg很棒，看起来您已经掌握了一切，非常感谢 :thumbsup:

我不知道这是否相关，但我无法使用鼠标按下并突出显示文本在我的任何角度应用程序上选择文本。 这发生在导入 DragScrollModule 之后。 我去了演示页面，经过验证的文本选择也根本无法在该页面上工作。

现在在页面上的任何位置选择文本的唯一方法是使用鼠标双击和键盘突出显示文本...

有什么可以暂时覆盖这种行为的方法吗？

我通过使用 (reachesLeftBound) 来确定它是否被拖动以阻止点击来解决这个问题。
添加 (reachesLeftBound) 到您的 dragScroll
<div dragScroll [scrollbar-hidden]="true" (reachesLeftBound)="leftBoundStat($event)">
将鼠标事件添加到您的 div 等。
<div (mousedown)="down()" (click)="fire()">
在你的 component.ts 添加以下内容

click = false;
leftBoundStat(event: any): void {
        if (this.click) {
            this.click = false;
        }
    }

    down() {
        console.log('Mouse down');
        window.setTimeout(this.startCheck(), 1000);
    }

    fire() {
        if (this.click) {
            console.log('Fire the action');

        }
    }
startCheck() {
        this.click = true;
    }

如果要拖动，这将阻止单击。
顺便说一句，隐藏滚动条仍然对我不起作用。 如果有人知道如何使它工作，我将不胜感激:)

嗨@STIKO ，可以给我一个plunker链接，以便我可以仔细看看吗？

我无法让它在 plunker 中工作，因为我以前从未使用过它。
我在 app.module.ts 中导入它
import {DragScrollModule} from 'ngx-drag-scroll';
然后我将它添加到同一文件的@NgModule导入
imports: [DragScrollModule];
我假设上述内容是正确的，因为阻力正在起作用。
现在在我的组件中

export class Example implements OnInit {
   @Input() 'scrollbar-hidden': boolean;
}

不确定是否需要@Input() 。 最后是模板

<div dragScroll scrollbar-hidden="true"
         drag-scroll="true"
         drag-scroll-y-disabled="true"
         snap-disabled="true">

          <div style="display: inline">
            <img src='http://via.placeholder.com/310x471'/>
          </div>
          <div style="display: inline">
            <img src='http://via.placeholder.com/310x471'/>
          </div>
          <div style="display: inline">
            <img src='http://via.placeholder.com/310x471'/>
          </div>
      </div>
</div>

一切正常，除了当我滚动时，即使我将禁用设置为 true，滚动条仍然显示

您可以尝试删除 img 标签的 div 包装器并为其指定宽度和高度吗？
像下面这样的东西。 看看这是否为您解决了问题。

@Component({
  selector: 'my-app',
  styles: [`
    .image-cell: {
      width: 310px;
      height: 470px;
    }
  `]
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div dragScroll 
         drag-scroll-y-disabled="true"
         scrollbar-hidden="true"
         snap-disabled="true" style="height: 470px; width: 310px;">
          <img class="image-cell" src='http://via.placeholder.com/310x471'/>
          <img class="image-cell" src='http://via.placeholder.com/310x471'/>
          <img class="image-cell" src='http://via.placeholder.com/310x471'/>
      </div>
    </div>
  `,
})