Ngx-drag-scroll: クリック伝播

作成日 2018年07月13日  ·  8コメント  ·  ソース: bfwg/ngx-drag-scroll

  • 私は提出しています...

    • [x]バグレポート

    • []機能リクエスト

    • []サポートリクエスト=>ここではサポートリクエストを送信しないでください。このテンプレートの上部にある注を参照してください。

クリックをドラッグして離すと問題が発生します。「問題#54-修正:ドラッグアンドドロップの直後にクリックの伝播を防ぐ」と書かれているように、イベントは伝播を停止していないようです。

  • バージョン:1.8.2
  • ブラウザ:すべてのデスクトップブラウザ

全てのコメント8件

2.0.0-beta.3では再現できません。 再現手順を教えていただけますか?

こんにちは! ご回答ありがとうございます。 「divs」要素をスクロールしようとしていますが、これは正しい方法ではない可能性があります。
コードは次のとおりです。

<drag-scroll class="drag-scroll center" #dragScroll scrollbar-hidden='true' drag-scroll-y-disabled='true' snap-disabled='true'>
        <div drag-scroll-item *ngFor="let ah of article_list">
          <col-article [article]="ah"></col-article >
        </div>
 </drag-scroll>

画像をクリックしてドラッグするだけですが、離すと画像リンクにリダイレクトされます。 「ドラッグ」イベントを追加する別の可能性はありますか?

単純な画像のスクロールと「div」要素の間に違いはありますか? モジュールの残りの部分は正常に機能しており、本当に良い仕事です。

デモで問題を再現しようとしていますが、ドラッグしているアイテムがリンクの場合に発生します。 たとえば、デモでは、画像をから変更した場合

<img _ngcontent-c6="" src="assets/img/c3po.png">

<a href="http://anyurl.com"><img _ngcontent-c6="" src="assets/img/c3po.png"></a>

それは私のプロジェクトと同じ振る舞いをします。

よろしくお願いします。

この問題を回避するために、コードにわずかな処理を実装しました。
html:
`

               <div   dragScroll   (reachesLeftBound)="leftBoundStat($event)" (reachesRightBound)="rightBoundStat($event)" #nav > 

                    <div class=" slide-mes"   *ngFor="let item of items " (click)="doAny(item)" >

                    </div>

                </div>

`

タイプスクリプト:

`

@ViewChild('nav', {read: DragScrollDirective}) ds: DragScrollDirective;
clickEnable = true;
constructor( ) {
}
@HostListener('mousedown', ['$event'])
onMousedown(event) {

    this.clickEnable = true

}
leftBoundStat(reachesLeftBound: boolean) {
    this.leftNavDisabled = reachesLeftBound;
    this.clickEnable = false;
}

rightBoundStat(reachesRightBound: boolean) {
    this.rightNavDisabled = reachesRightBound;
    this.clickEnable = false;
}
doAny(item){
    if(this.clickEnable){
        //do what you whant on click here
    }
}

`

こんにちはGuilherme! ご回答有難うございます! いずれの境界にも達しない場合、これは機能していますか? 私の実装では、スクロールするiitemがたくさんあり、たとえば、境界ではなく、その中央でクリックを離すと、とにかく伝播します。境界イベントは、そのうちの1つに到達したときにのみ生成されます(左または右)。

divをスクロールすると、境界イベントが生成されます。これにconsole.logを入力して確認してください。

ありがとう! 動いた! しかし、マウスイベントをリッスンするようにすべての子コンポーネントを調整する必要がありました。そのため、モジュール自体でその機能を要求しました。

こんにちは@ leogilardi6 、返信が遅くなってすみません。 私は仕事にうんざりしていました。

https://github.com/bfwg/ngx-drag-scroll/blob/develop/demo/app/home/home.component.html#L4-L12をに変更してみました

    <drag-scroll class="demo-one"
      drag-scroll-y-disabled="true"
      scrollbar-hidden="true"
      (reachesLeftBound)="leftBoundStat($event)"
      (reachesRightBound)="rightBoundStat($event)"
      #nav
      >
      <a drag-scroll-item *ngFor="let image of imagelist" href="https://www.google.com"><img [src]="'assets/img/' + image" (click)="clickItem(image)"/></a>
    </drag-scroll>

しかし、バージョン2.0.0-beta.3では再現できませんでした

最新バージョンで遊んでみましたか?

このページは役に立ちましたか?
0 / 5 - 0 評価