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


88

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

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

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

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

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

何が問題ですか?


回答:



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

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

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


なぜ私は電話をする必要がstopPropagation()ありpreventDefault()ますか?
smartcaveman 2011

2
Jonathonsの回答を見て、彼は各関数の機能を説明しています。ただし、基本的には、処理したクリックが後で他の誰かによって処理されないようにするためです。
ピーター

30

e.preventDefault()デフォルトの機能が実行されないようにする必要があります。

またはreturn falseあなたの方法から持っています。

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



1

このコードはすべてのイベントリスナーを取り除きます

var old_element=document.getElementsByClassName(".update-cart");    
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);  
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.