Question

此Meteor客户端事件使用类swipe滑动元素，该工作正常。我遇到的问题是鼠标左键仍然按下并移动到另一个元素＆＃34;非故意＆＃34;在同一个类中，第二个元素也开始响应mousemove。

我需要鼠标移动一次粘贴到一个元素，因为此代码是滚动我自己的滑动代码的一部分，该代码将<p>元素滑动到屏幕右侧。所有元素都具有相同的类。如何解决这个问题？感谢

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事件时向元素添加一个额外的css类，并仅在具有该附加类的元素上处理mousemove事件。例如：

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

确保在鼠标启动时删除其他课程。请记住，您必须在任何元素上处理鼠标，因为鼠标可以在滑动时远离所有“滑动”元素（就像移动到导致您初始问题的其他元素一样）。

将mousemm限制为一个元素

1 个答案: