jQuery即使我返回false，仍会在URL末尾添加#号

Question

我有这份代码，在其中添加了return false;，以保证它执行完毕后不会在url末尾添加#符号，但是它仍然会这样做。你们有什么想法，我做错了什么，应该在哪里添加return false;？

    // Called right away after someone clicks on the vote up link
    $('.vote_up').mouseup(function() 
    {        
        $("#loading").show();
        var problem_id = $(this).attr("data-problem_id");

        vote(problem_id , 1);

        //Return false to prevent page navigation
        return false;       
    });

    $('.vote_down').mouseup(function() 
    {
        $("#loading").show();
        problem_id = $(this).attr("data-problem_id");

        vote ( problem_id , -1 );

        //Return false to prevent page navigation
        return false;
    });       

// Global function
var vote = function(problem_id , vote) 
{
    var dataString = 'problem_id=' + problem_id + '&vote=' + vote;

    // The person is actually logged in so lets have him vote
    $.ajax({
        type: "POST",
        url: "/auth/check_login.php",
        dataType: "json",
        success: function(data)
        {
            $.ajax({    
                type: "POST",
                url: "/problems/vote.php",
                data: dataString,
                success: function(html)
                      { 
                           $("#loading").hide();
                           if ( html == "not_logged_in" )
                           {
                               queue.login = false;

                               //set the current problem id to the one within the dialog
                               $problemId.val(problem_id);                  

                               // Try to create the popup that asks user to log in.
                               $("#loginpopup").dialog(  {title: 'Please Login To Vote'} );  // title: 'Login Dialog'

                               // prevent the default action, e.g., following a link
                               return false;
                           }
                           else
                           if ( html == "already_voted" )
                           {
                               // Display a dialog box saying that the user already voted
                               $('<div>You already voted this way on this problem.</div>').dialog( {title: 'Already Voted'});
                               // show div which says un-important, hide div which says important

                               $("#support").hide();
                               $("#dont_support").show(); 

                               return false;                              
                           }
                           else
                           if (  html == "error_getting_vote" )
                           {
                               $('<div />').html('Error getting existing votes.').dialog();
                           }
                           else
                           {
                               if ( vote == -1 )
                               {
                                   $("#support").show();
                                   $("#dont_support").hide();                                                              
                               }
                               else
                               {
                                   $("#support").hide();
                                   $("#dont_support").show();                                                              
                               }

                               // Now make a call to AJAX to get the count of votes
                               $.ajax({    
                                   type: "POST",
                                   url: "/problems/get_vote_count.php",
                                   data: dataString,
                                   success: function(html)   
                                   {
                                       var class_name = ".votes_"+problem_id;

                                       $(class_name).text(html);

                                       return false;                                   
                                   }
                                });    

                                return false;                            
                           }                        
                      },
                      error: function(html) 
                      {
                          $("#loading").hide();

                          return false;
                      } // End of error case    
                }); // Closing inner AJAX call.
            },
            error: function(data)
            {
                $("#loading").hide();
                $("#loginpopup").dialog( {title: 'Please Login To Vote'} );

                return false;
            } // End of error
        }); // End of outer AJAX.

        return false;
};    

- GeekedOut

---

有趣...我以为这不是一个错误，因为JS控制台没有报告任何问题....嗯...不知道是什么原因。 - GeekedOut

你应该将事件（e）传递给事件回调函数并使用 e.preventDefault();，而不是使用 return false;。如果 return false; 无法解决问题，也不要认为这样做会修复它。 - Robin

@RobW 这很有趣，因为JS控制台没有报告任何问题。我想知道可能是什么原因。 - GeekedOut

Answer 1

您应该将事件监听器绑定到click事件上，而不是mouseup。当触发mouseup时，默认行为已经发生，不能再被取消。

$('.vote_down').click(function(e) {
    e.preventDefault();
    // Rest of code

PS. 从你的代码可以看出，你有单独的页面来投票：

• AJAX 请求 - 是否已登录？
• AJAX 请求 - 投票

如果投票页面没有包含某种身份验证，那么这种模型非常不安全。用户可以通过创建人造请求到投票页面轻易地绕过登录页面。

你应该合并登录和投票页面。

- Rob W

---

我尝试使用mouseup函数，但它没有起作用。我认为我不能使用click函数，因为我之前这样做过，导致一些.hide和.show函数在后来调用的函数中无法正常工作。 - GeekedOut

啊，好的，我刚试了一下，一切正常 - 非常感谢，我会在几分钟内接受那个答案。 - GeekedOut

@GeekedOut 事件按绑定顺序触发。只需以逻辑方式绑定您的事件：.hide/show，然后进行 AJAX 投票。 - Rob W

Answer 2

将您的链接语法从<a href="#">更改为<a href="javascript:void(0);" />，而不更改您的js代码。

- Tomislav Markovski