如何防止用户被重定向到JavaScript中的链接？

Question

var $ = function (id) {
    "use strict";
    return document.getElementById(id);
};

$(document).ready(function () {
    "use strict";
    $('redirect').click(function () {
        window.alert('you clicked the link');
        return false;
    }); 
});

 <a href="http://www.google.com" id="redirect">Visit Goggle</a>

我有一个HTML链接，我想在我的其余代码中使用JavaScript和Jquery。当用户点击链接时，我想要一个警告弹出一条消息，但我不想让链接将它们重定向到该页面。当我使用开发人员工具在Chrome中查看我的代码时，收到一条错误消息“未捕获的TypeError：无法读取'ready'的null属性”。为什么ready属性为null，我该如何解决？

var $ = function (id) {
    "use strict";
    return document.getElementById(id);
};

$(document).ready (function () {
    "use strict";
    $('redirect').click(function () {
        window.alert('you clicked the link');
        return false;
    }); 
});

 <a href="http://www.google.com" id="redirect">Visit Goggle</a>

`

Answer 1

你需要使用e.preventDefault()，像这样：

$(document).ready(function () {

    $('#redirect').click(function (e) {
        e.preventDefault();
        window.alert('you clicked the link');   
    }); 

});

此外，如果您需要按类引用元素（使用jQuery）：

$('.someClass').on('click', function() {
 ...

如果您想通过ID访问它们：

$('#someId').on('click', function() {
...

Answer 2

您的问题是您正在将jQuery的$函数重新定义为您自己的自定义函数。不要这样做！它完全取消了jQuery（你必须使用详细的jQuery表单）。您还可以使用preventDefault来防止超链接更改您的页面。

$(document).ready(function () {
    "use strict";
    $('redirect').click(function(e) {
        e.preventDefault();
        window.alert('you clicked the link');
    }); 
});

还要确保你有jQuery - 把它放在你的页面顶部：

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Answer 3

var $ = function (id) {
    "use strict";
    return document.getElementById(id);
};

如果你使用$作为你的jQuery包装器，那么上面的代码将覆盖该变量。这意味着它不再是jQuery而是你设置的自定义函数。尝试更改上面的函数或变量的名称。