web-dev-qa-db-ja.com

jQueryを使用してデフォルトのリンククリック動作を停止する方法

Webページにリンクがあります。ユーザーがクリックすると、ページ上のウィジェットが更新されます。ただし、イベントが発生する前にデフォルトの機能（別のページに移動する）が発生するため、私は何かをしています。

リンクは次のようになります。

  <a href="store/cart/" class="update-cart">Update Cart</a>

JQueryは次のようになります。

   $('.update-cart').click(function(e) { 
         e.stopPropagation(); 
         updateCartWidget(); 
      });

何が問題ですか？

javascriptjqueryeventsclickjquery-events
79
smartcaveman
e.preventDefault();

from https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

イベントのそれ以上の伝播を停止することなく、キャンセル可能な場合はイベントをキャンセルします。

129
Artjom Zabelin

e.preventDefault()を使用して、デフォルトの機能が発生しないようにします。

または、メソッドからreturn falseを取得します。

preventDefaultはデフォルトの機能を防ぎ、stopPropagationはイベントがコンテナ要素にバブリングするのを防ぎます。

28
Jonathon Bolster
$('.update-cart').click(function(e) {
    updateCartWidget();
    e.stopPropagation();
    e.preventDefault();
});

$('.update-cart').click(function() {
    updateCartWidget();
    return false;
});

次のメソッドはまったく同じことを実現します。

27
Peeter

e.preventDefault();の代わりにe.stopPropagation();を使用できます

2
Null Pointer

このコードはすべてのイベントリスナーを削除します

var old_element=document.getElementsByClassName(".update-cart");    
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);
1
Matoeil