無法阻止javascript中的默認事件

Question

我只是一個初學者編碼器，所以也許這個問題會讓你微笑，但我找不到任何解決方案。

我有一個鏈接：

 <div class="comments"><a href="#" onclick="get_comments('.$row['post_id'].')">'.$comments_no.' comments</a></div>

點擊后觸發一個功能：

 function get_comments(id) {
 x = "#cf"+id;
 y = "#comments"+id;
 $(x).toggle(100);
 var dataString = id;
 $(".loading").ajaxStart(function () {
 $(this).show();
 });
 $(".loading").ajaxStop(function () {
 $(this).hide();
 });

 $.ajax({
 type: 'POST',
 url: 'load_comments.php',
 data: {'dataString':dataString},
 cache: false,

 success: function(data){
 $(y).html(data);
 }
 });
 return false;    
 };    

一切正常，直到我實際點擊一個鏈接...每次我點擊一個鏈接，它會把我帶到頁面的頂部。 任何人都可以建議我如何解決這個問題？

Answer 1

可以使用href="#"但我沒有看到你的preventDefault函數。

嘗試這個：

HTML：

<div class="comments">
    <a href="#" class="comments-click" data-id="'.$row['post_id'].'">'.$comments_no.' comments</a>
</div>

JS：

$(document).ready(function() {
    $('.comments-click').click(function(event) {
        event.preventDefault(event);
        id = $(this).data('id');
        /* ... */
    });
});

使用.data()可以訪問data-*屬性。

使用.click()你有一個比onclick更好的事件處理程序，傳遞事件（點擊'＃'）並阻止它！

JSFiddle： http ： //jsfiddle.net/aCLyw/2/

http://api.jquery.com/event.preventDefault/

（抱歉1000次修改答案）

Answer 2

您需要從事件處理程序返回false

<div class="comments"><a href="#" onclick="return get_comments('.$row['post_id'].')">'.$comments_no.' comments</a></div>

Answer 3

這導致該行為： href="#"

因此，如果你不想要它，你可以在href中調用一個javascript函數，或者不使用這個屬性，那么你必須設計你的錨看起來像一個鏈接。

href="#"表示轉到頁面頂部。 您可以使用另一個引用： href="#foo"表示使用id foo跳轉到<hr> 。

可能的解決方案：

<a href="javascript:get_comments('.$row['post_id'].')">

要么

<a onclick="get_comments('.$row['post_id'].')" class="mylink">

如果你刪除href，它看起來不像是一個帶有.mylink類的樣式的鏈接。

Answer 4

試試這個，它會起作用

 <div class="comments"><a href="Javascript:void(0)" 
  onclick="get_comments('.$row['post_id'].')">'.$comments_no.' comments</a></div>

Answer 5

當使用（或濫用）A-Tag作為JavaScript按鈕時，您有兩個選項來阻止默認行為（即鏈接后）：

javascript：void 0

而不是設置href="#" ，使用它來完成工作並返回undefined ，例如： href="javascript: void(get_comments('.$row['post_id'].'))" 。 有關void更多信息，請參閱此答案 。

event.preventDefault

更好的方法是分離HTML和JavaScript（請參閱Unobstrusive JavaScript ）並使用事件處理程序。 在JS中，您只需向DOM-Element添加一個處理程序即可

<a id="commentsLink" data-id=".$row['post_id']." href="#">comments</a>

通過

var commentsLink = document. getElementById("commentsLink");
commentsLink.addEventListener("click", function(event) {
  var postId = event.target.getAttribute("data-id");
  // your code
  event.preventDefault();
}