mousemoveを1つの要素に限定してください

Question

このMeteorクライアントイベントは、クラスswipeで正常に動作する要素をスワイプします。私が抱えている問題は、マウスの左ボタンがまだ押されていて、同じクラスで別の要素 "un unentionally"に移動している間です.2番目の要素はmousemoveにも反応します。

このコードは、画面の右側に<p>要素をスワイプする独自のスワイプコードをローリングする際に使用するため、一度に1つの要素に固執するにはmousemoveが必要です。すべての要素が同じクラスです。どのようにしてこの問題を解決できますか？おかげ

Template.swipe.events({ 
    'mousemove .swipe': function (event) { 
    let moveBy = utility.swipeRight(event.clientX); 
    if (!moveBy) return; 
    $(event.target).offset({left: moveBy}); 
    } 
}); 

<template name="swipe"> 
    {{#each items}} 
    <p class="whole swipe" data-id={{this.index}}>{{{value}}}</p> 
    {{/each}} 
</template> 

Answer 1

Mousemoveイベントは、要素の上にしながら、ときにマウスの動きを発射されます。要素が「アクティブ」であるかどうかに関係なく、スワイプ要素の上にマウスが移動すると、イベントが発生します。 （あなたの例が正しく理解されていれば、マウスボタンが押されているかどうかにかかわらず起動します）

mousedownイベントがその要素で発生し、mousemoveを処理すると、cssクラスを要素に追加するのが簡単ですイベントは、その追加のクラスを持つ要素に対してのみ発生します。例：

Template.swipe.events({ 
    'mousedown .swipe': function(event){ 
     $(event.target).addClass('active'); 
    }, 
    'mouseup': function(event){ 
     $('.swipe').removeClass('active'); 
    }, 
    'mousemove .swipe.active': function (event) { 
     //same code 
    } 
}); 

マウスがアップしているときは、必ず追加のクラスを削除してください。スワイプ中にマウスをすべてのスワイプ要素から離すことができるので（最初の問題を引き起こした別の要素に移動されたのと同じように）、マウスアップを処理する必要があることに注意してください。