Jquery：<a>链接click preventDefault（）不工作？

Question

我试图防止链接点击发射，如果在移动时滚动时意外触摸？我从来没有尝试过这样的事情，并且无法正确工作。我现在正在桌面上测试它。 我的按钮结构类似：

<a href="http://www.google.com"> 
    <div style="width:100%;height:80px;margin-bottom:50px;">test</div> 
</a> 

我试图使用preventDefault（）函数来替代默认的点击行动，并检查是否有网页被滚动，或者点击允许它之前是偶然工作。检查的逻辑似乎可行，但无论我做什么，链接都可以通过点击进行导航。我认为这与链接行为被传播给子div有关，但我不确定。

下面是我的脚本，问题出在最后$（'a'）。click（）;功能。

UPDATE：

我还需要一个更好的方法只用$如果有谁知道如何做到这一点（ 'A'）选择。但是，如果我将选择器更改为$（'a> div'）并将'targetLink'更改为$（this）.parent（）。attr（'href'），它似乎可以工作，Is there一种使用$（'a'）的方法只是因为我的一些按钮有更多的孩子。

//Mobile accidental scroll click fix:--- 
//- prevent clicked link from executing if user scrolls after mousedown, until next mousedown. 
//- prevent clicked link from executing if user is still scrolling and mouse is down(for slow scrolls) 

$(document).ready(function(){ 
    var self = this, 
     scrolling = false, 
     mouseDown = false, 
     scrollAfterPress = false; 
     scrollDelay = 1500, 
     linkConditionCheckDelay = 700; 

     $(window).scroll(function() { 
      self.scrolling = true; 
      console.log('scrolling:' + self.scrolling); 
      clearTimeout($.data(this, "scrollCheck")); 
      $.data(this, "scrollCheck", setTimeout(function() { 
       self.scrolling = false; 
       console.log('scrolling:' + self.scrolling); 
      }, scrollDelay)); 

     }); 

     $(document).mousedown(function(){ 
       self.scrollAfterPress = false; 
       int00 = setInterval(function() { checkScrollAfterPress(); }, 100);//execute every 100ms (while mouse is down) 
       self.mouseDown = true; 
       console.log('mousedown:'+ self.mouseDown); 
      }).mouseup(function(){ 
       clearInterval(int00); 
       self.mouseDown = false; 
       console.log('mousedown:'+ self.mouseDown); 
      }); 

     function checkScrollAfterPress(){ 
      if(self.scroll === true){ 
       self.scrollAfterPress = true; 
      } 
     } 

     $('a').click(function(e){ 
      //prevent default click event behaviour 
      var targetLink = $(this).attr('href'); 
      console.log('clicked on:'+targetLink); 
      setTimeout(function() { 
        if(!self.scrolling && !self.mouseDown && !self.scrollAfterPress && targetLink !== undefined){ 
         window.location.href = targetLink; 
        } 
       }, linkConditionCheckDelay); //add small delay to prevent immeditiate responses between mouse up and start of scroll. 
      e.stopPropagation(); 
      e.preventDefault(); 
     }); 
}); 

Answer 1

您可以使用return false或e.preventDefault

但是当你点击该链接，为什么你的加入window.location.href = targetLink;上？这将重定向用户到指定的位置。同名链接

试试我的代码下面我已经删除它。

$(document).ready(function(){ 
 
    var self = this, 
 
     scrolling = false, 
 
     mouseDown = false, 
 
     scrollAfterPress = false; 
 
     scrollDelay = 1500, 
 
     linkConditionCheckDelay = 700; 
 

 
     $(window).scroll(function() { 
 
      self.scrolling = true; 
 
      console.log('scrolling:' + self.scrolling); 
 
      clearTimeout($.data(this, "scrollCheck")); 
 
      $.data(this, "scrollCheck", setTimeout(function() { 
 
       self.scrolling = false; 
 
       console.log('scrolling:' + self.scrolling); 
 
      }, scrollDelay)); 
 

 
     }); 
 

 
     $(document).mousedown(function(){ 
 
       self.scrollAfterPress = false; 
 
       int00 = setInterval(function() { checkScrollAfterPress(); }, 100);//execute every 100ms (while mouse is down) 
 
       self.mouseDown = true; 
 
       console.log('mousedown:'+ self.mouseDown); 
 
      }).mouseup(function(){ 
 
       clearInterval(int00); 
 
       self.mouseDown = false; 
 
       console.log('mousedown:'+ self.mouseDown); 
 
      }); 
 

 
     function checkScrollAfterPress(){ 
 
      if(self.scroll === true){ 
 
       self.scrollAfterPress = true; 
 
      } 
 
     } 
 

 
     $('a').click(function(e){ 
 
      //prevent default click event behaviour 
 
      var targetLink = $(this).attr('href'); 
 
      console.log('clicked on:'+targetLink); 
 
      setTimeout(function() { 
 
        if(!self.scrolling && !self.mouseDown && !self.scrollAfterPress && targetLink !== undefined){ 
 
         //window.location.href = targetLink; 
 
        } 
 
       }, linkConditionCheckDelay); //add small delay to prevent immeditiate responses between mouse up and start of scroll. 
 
      return false; 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="http://www.google.com"> 
 
    <div style="width:100%;height:80px;margin-bottom:50px;">test</div> 
 
</a>

Answer 2

使用您$'a'.click(function(e){...}部分return false;，防止默认行为。

你的情况：

$('a').click(function(e){ 
     var targetLink = $(this).attr('href'); 
     console.log('clicked on:'+targetLink); 
     setTimeout(function() { 
       if(!self.scrolling && !self.mouseDown && !self.scrollAfterPress && targetLink !== undefined){ 
        window.location.href = targetLink; 
       } 
      }, linkConditionCheckDelay); 
     return false;//Stops default behavior 
    }); 

Answer 3

也许有我丢失的东西，但我不明白为什么你的代码不能进行简单，如下：

$(document).ready(function() { 
    var is_scrolling = false; 
    var timeout = null; 

    $(window).scroll(function() { 
     is_scrolling = true; 
     if (timeout) { 
      clearTimeout(timeout); 
     } 
     timeout = setTimeout(function() { 
      is_scrolling = false; 
     }, 1500); 
    }); 

    $('a').click(function (e){ 
     if (is_scrolling) { 
      e.preventDefault(); 
     } 
    }); 
}); 

Answer 4

我会建议另一种方法并使用jQuery Mobile Events。事情是这样的：
^{*未经测试，但这个想法}

// set global var 'locked' 
var locked = false; 

// locked var true while scrolling 
jQuery(document).on('scrollstart', function() { locked = true; }); 

// locked var back to false when finish 
jQuery(document).on('scrollstop', function() { locked = false; }); 

// bind 'tap' & 'click' events to 'a' tag 
jQuery(document).on('tap click', 'a', function(event) { 
    // But before proceed, check locked var 
    if (locked) { 
     event.preventDefault; 
     return false; 
    } else { 
     // ok, proceed with the click and further events... 
    } 
}); 

^{文档/ REF： scrollstart event scrollstop event tap event vclick event .click()}