Javascript Jquery:<；a>；链接单击preventDefault（）不工作？

我正试图防止链接点击触发，如果在手机中滚动时意外触碰？我以前从来没有尝试过这样的东西，我很难让它正常工作。我现在正在桌面上测试这个。 我的按钮的结构类似于：

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

---

在

$'a'中使用。单击（函数（e）{…}

part

returnfalse；

以防止默认行为

就你而言：

$('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
    });

---

您可以使用

returnfalse

或

e.preventDefault

但是，当您单击该链接时，为什么要添加

window.location.href=targetLink；

？，这会将用户重定向到给定位置。与链接相同

请尝试下面的代码，我已将其删除

$（文档）.ready（函数（）{
var self=这个，
滚动=错误，
mouseDown=false，
scrollAfterPress=false；
滚动延迟=1500，
linkConditionCheckDelay=700；
$（窗口）。滚动（函数（）{
self.scrolling=true；
log（'scrolling:'+self.scrolling）；
clearTimeout（$.data（这是“滚动检查”）；
$.data（此“滚动检查”，setTimeout（函数（）{
self.scrolling=false；
log（'scrolling:'+self.scrolling）；
}延迟）；
});
$（文档）.mousedown（函数（）{
self.scrollAfterPress=false；
int00=setInterval（function（）{checkScrollAfterPress（）；}，100）；//每100毫秒执行一次（鼠标按下时）
self.mouseDown=true；
log（'mousedown:'+self.mousedown）；
}).mouseup（函数（）{
清除间隔（int00）；
self.mouseDown=false；
log（'mousedown:'+self.mousedown）；
});
函数checkScrollAfterPress（）{
如果（self.scroll==true）{
self.scrollAfterPress=true；
}
}
$（'a'）。单击（函数（e）{
//防止默认单击事件行为
var targetLink=$（this.attr（'href'）；
log（'单击：'+targetLink）；
setTimeout（函数（）{
如果（！self.scrolling&&！self.mouseDown&&！self.scrollfafterpress&&targetLink！==未定义）{
//window.location.href=targetLink；
}
}，linkConditionCheckDelay）；//添加小延迟，以防止在鼠标向上移动和滚动开始之间出现即时响应。
返回false；
});
})；

---

也许我遗漏了一些东西，但我不明白为什么您的代码不能像下面这样简单：

$(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();
        }
    });
});

---

我将建议另一种方法并使用

jquerymobilevents

*未经测试，但这是一个想法

文件/ref:

---

尝试在你的.click函数上返回false。例如，return false；return false仍然不会阻止它。如果我将选择器更改为$（'a>div'），这会使链接完全停止工作，这会有些效果。此外，我更喜欢只使用$（'a'）选择器，因为我的一些按钮可能会有更多的子按钮。如果在桌面上进行测试，您是否考虑了mobile touch内置的延迟？如果我将选择器更改为$（'a>div'），并将'targetLink'更改为$（this.parent（）.attr（'href'），似乎可以工作，有没有办法使用$（'a'）执行此操作这只是因为我的某些按钮有更多的子项。您可以使用它来获取没有子项的“a”标记的子项（是叶节点--最里面的子项。）…

$（“a”）。子项（“：not（：has（*）”）

但这有一个问题。如果子层次结构不是严格线性的，则每个链接可能有多个叶节点，并且在同一个“a”标记下会有重复的事件。window.location.href=targetLink；允许在用户不滚动页面的情况下链接正常运行。（即，点击并非偶然）

$(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();
        }
    });
});

// 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...
    }
});