programing tip

jQuery로 기본 링크 클릭 동작을 중지하는 방법

itbloger 2020. 10. 7. 07:26
반응형

jQuery로 기본 링크 클릭 동작을 중지하는 방법


웹 페이지에 링크가 있습니다. 사용자가 클릭하면 페이지의 위젯이 업데이트됩니다. 그러나 이벤트가 발생하기 전에 기본 기능 (다른 페이지로 이동)이 발생하기 때문에 뭔가를하고 있습니다.

링크는 다음과 같습니다.

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

다음은 jQuery의 모습입니다.

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

무엇이 문제입니까?


e.preventDefault();

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

이벤트의 추가 전파를 중지하지 않고 취소 가능한 경우 이벤트를 취소합니다.


e.preventDefault()기본 기능이 발생하지 않도록 하려고 합니다.

또는 return false당신의 방법에서 가져옵니다.

preventDefault기본 기능을 stopPropagation방지하고 이벤트가 컨테이너 요소까지 버블 링되는 것을 방지합니다.


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

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

다음 방법은 똑같은 결과를 얻습니다.


e.preventDefault();대신 사용할 수 있습니다.e.stopPropagation();


이 코드는 모든 이벤트 리스너를 제거합니다.

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

참고 URL : https://stackoverflow.com/questions/5632031/how-to-stop-default-link-click-behavior-with-jquery

반응형