我如何防止在touchmove和mousemove期间重定向href？

Question

在尝试将touchstart和mousedown合并到1个函数中时遇到问题。我使用a标签作为函数的目标元素，当我触摸或单击标签时可以直接转到链接。

问题是当我touch标记的中间a时，链接没有响应。仅当我click元素或触摸a标签的边缘并且输出触发mousedown时有效。

在移动模式下，请尽可能多地单击a标签的边缘，就像上面图片中的灰色点一样。我创建了一个CodePen示例，以更好地进行外观，测试和理解。

我该如何解决此问题？

class Slider {
  constructor($el, paragraph) {
    this.$el = $el;
    this.paragraph = paragraph;
  }
  start(e) {
    e.preventDefault();
    var type = e.type;
    if (type === 'touchstart' || type === 'mousedown') this.paragraph.text(this.paragraph.text() + ' ' + type);
    return false;
  }
  apply() {
    this.$el.bind('touchstart mousedown', (e) => this.start(e));
  }
}
const setSlider = new Slider($('#anchor'), $('.textbox'), {passive: false});
setSlider.apply();

  a {
    display: block;
    width: 100px;
    height: 100px;
    background-color: orange;
  }

<a id="anchor" href="https://google.co.uk">Tap or Click Me</a>
<p class="textbox"></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

==========进展更新=========

我刚刚添加了move和end功能，然后我必须单击两次以转到链接的网站。情况越来越糟，不知道如何解决这个问题。

class Slider {
  constructor($el, paragraph) {
    this.$el = $el;
    this.paragraph = paragraph;
  }
  start(e) {
    e.preventDefault();
    var type = e.type;
    if (type === 'touchstart' || type === 'mousedown') this.paragraph.text(this.paragraph.text() + ' ' + type);
    this.$el.bind('touchmove mousemove', (e) => this.move(e));
    this.$el.bind('touchend mouseup', (e) => this.end(e));
    return false;
  }
  move(e) {
    var type = e.type;
    if (type === 'touchstart' || type === 'mousedown') this.paragraph.text(this.paragraph.text() + ' ' + type);
    return false;
  }
  end(e) {
    console.log('test');
    this.$el.on('click');
    this.$el.off('touchstart touchend');
    return false;
  }
  apply() {
    this.$el.bind('touchstart || mousedown', (e) => this.start(e));

  }
}
const setSlider = new Slider($('#anchor'), $('.textbox'));
setSlider.apply(); 

========赏金更新后的进度（最新）========

经过数十次尝试，我终于想出了解决上述问题的方法，但遇到了一个新问题，该问题无法立即拖动和重定向。

当我在启动函数中使用preventDefault时，所有事件都可以正常工作。这种情况的唯一问题是拖动并不能阻止从a标记重定向链接。无论使用哪种方式调用，单击或拖动，它总是将我发送到网站。

当我不使用preventDefault时，拖动将不起作用。它仅适用于单击元素。

我的最终目标是防止a和touchmove这两个事件重定向mousemove标记的链接。我在Google上被搜索了很多次，但没有任何线索。

我已经在Codepen中写了一个示例，这是我到目前为止所做的：

class Slider {
  constructor($el, paragraph) {
    this.$el = $el;
    this.paragraph = paragraph;
  }
  start(e) {
    var type = e.type;
    if (type === 'touchstart') {
      this.paragraph.text(this.paragraph.text() + ' ' + type);
    } else if (type === 'mousedown') {
      this.paragraph.text(this.paragraph.text() + ' ' + type);
    }
  }
  move(e) {
    var type = e.type;
  }
  end(e) {
    var type = e.type;
    if (type === 'touchend') {
      console.log('touchstart enabled');
    } else if (type === 'mouseup') {
      console.log('mousedown enabled');
    }
  }
  apply() {
    this.$el.bind({
      touchstart: (e) => this.start(e),
      touchmove: (e) => this.move(e),
      touchend: (e) => this.end(e),
      mousedown:(e) => this.start(e),
      onmousemove: (e) => this.move(e),
      mouseup:  (e) => this.end(e)
    });
  }
}
const setSlider = new Slider($('#anchor'), $('.textbox'));
setSlider.apply();

    a {
      display: block;
      width: 100px;
      height: 100px;
      background-color: orange; 
    }

    <a id="anchor" href="https://google.co.uk">Tap or Click Me</a>
    <p class="textbox"></p>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

我想我为您找到了解决方案。启用preventDefault并随后为a标签启用可拖动。让我知道这是否适合您。

 start(e) {
  e.preventDefault();
  ...//rest of the code
 apply() {
  $el.draggable("enable");
  ...//rest of the code

Answer 2

我想我找到了解决方案。将来，我会为一些努力寻找像我这样的问题的人添加此代码。

if (message.isMentioned(message.mentions.users.first()))

    function start(event, etype, condition) {
      console.log(etype); // track the type of event
      if (!condition) event.preventDefault(); // compare etype(eventType). Set preventDefault if condition is falsy.
      items.off('click');
      items.on({
        ['touchmove mousemove']: (event) => move(event, etype, condition),
        ['touchend mouseup']: end
      });
    }

    function move(event, etype, cnd) {
      if (cnd) event.preventDefault();
      console.log(cnd); // track the type of event from the condition
      items.on('click', function(event) {event.preventDefault();});
    }

    function end(event) {
      items.off('touchmove mousemove touchend mouseup');
    }
    var items = $('.item a');
    items.on('touchstart mousedown', function() {
      var eventType = event.type;
      var condition = (eventType === 'touchstart' || eventType === 'mousedown');
      start(event, eventType, condition);
    });

    #anchor {
      display: block;
      width: 100px;
      height: 100px;
      background-color: orange;
    }
    .item {
    background-color: gray;
    }

    .item + .item {
        margin-top: 10px;
    }

    .item a {
        cursor: pointer;
        display: inline-block;
        background-color: blue;
        color: white;
        padding: 9px;
        width: 100%;
        height: 100%;
    }