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，而是您已设置的自定义函数。尝试更改上面的函数或变量的名称。

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

3 个答案: