Question

我有一个使用锚点而不是链接的navabar。我正在制作聊天功能，每当用户在聊天中输入内容，然后输入时，它们就会被重定向到第一个锚点。我知道我需要使用AJAX，但我似乎无法弄明白。这是代码。

sed

Answer 1

在我看来，您提交的表单存在问题（通常在用户点击“Enter”而焦点位于表单子元素上时发生，而不是textarea）并且它会自动重新加载您的页面

例如，当您的表单上未指定action时会发生这种情况：后者尝试重新加载当前在浏览器导航栏中的内容（“位置”）。在您的情况下，如果该位置具有到另一个锚点的片段（哈希），该页面将只是滚动到该锚点。

您可以在文字输入中使用event.preventDefault()来阻止表单提交操作，也可以通过在submit事件上附加回调来更好地在表单上使用。

// NOTE: try using id's rather than names.
// Select the appropriate form.
var form = document.querySelector('form[name="chatbox"]');

form.addEventListener("submit", function (event) {
    // Prevent the form from reloading the page.
    event.preventDefault();
});

演示：http://jsfiddle.net/8odryt5p/1/

Answer 2

使用preventDefault（）阻止表单或页面重新加载。见下面的例子

单击特定ID

$('#myId').click(function(e){
   event.preventDefault();
});

点击任何课程

$('.myClass').click(function(e){
   event.preventDefault();
});

单击页面内任意锚点

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

单击div或section中的任何锚点后阻止页面重新加载

$('.myClass a').click(function(e){
   event.preventDefault();
});

点击，但留在锚点

2 个答案: