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

Question

当我尝试在一个函数中组合touchstart和mousedown ，我遇到了一个问题。 当我触摸或点击标签时，我使用了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(); 

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

经过几十次尝试，我终于找到并解决了之前的问题，但我遇到了一个无法拖延并立即重定向的新问题。

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

当我不使用preventDefault ，拖动不起作用。 它只适用于点击元素。

我的最终目标是防止重定向a标签的链接来自两个事件， touchmove和mousemove 。 我在谷歌上搜索了很多次，但没有得到任何线索。

我在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标签的draggable。 如果这对您有用，请告诉我。

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

Answer 2

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

  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%; } 

  <div id="items" class="items"> <div class="item"> <a target="_blank" href="https://google.com">Anchor</a> </div> <div class="item"> <a target="_blank" href="https://google.com">Anchor</a> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>