PreventDefault ()와 Return false를 사용하는 경우

PreventDefault ()와 Return false를 사용하는 경우

---

이 질문에 이미 답변이 있습니다.

• event.stopPropagation과 event.preventDefault의 차이점은 무엇입니까? 7 답변

첫째, JavaScript의 이벤트 모델에서 이벤트 버블 링 (이벤트가 하위 요소에서 상위 요소로 전파되도록 함)이라는 개념을 접하게됩니다. 이러한 종류의 버블 링 효과를 피하기 위해 많은 개발자가라는 이벤트 메서드를 사용합니다 stopPropagation( ). 또는 개발자는 return false이러한 전파를 중지 하기 위해 문을 사용하기 시작했습니다 . 이제라는 또 다른 용어가 preventDefault( )있습니다. 이름에서 알 수 있듯이이 메서드는 트리거 할 요소의 기본 동작을 방지합니다. 가장 좋은 사용 사례는 앵커 태그가 링크를 열지 못하게하는 것입니다.

앵커 태그가 링크를 여는 것을 방지하고 (기본 동작) 이벤트가 상위 항목으로 이동하는 것을 중지하려는 시나리오가있을 수 있습니다. 이러한 상황에서 두 줄의 코드를 작성하는 대신 한 줄로 완료 할 수 있습니다.return false

---

거짓 반환;

---

return false; 당신이 그것을 부를 때 3 개의 다른 일을합니다

1. event.preventDefault() – 브라우저의 기본 동작을 중지합니다.
2. event.stopPropagation() – 이벤트가 DOM을 전파 (또는 "버블 링")하는 것을 방지합니다.
3. 콜백 실행을 중지하고 호출시 즉시 반환합니다.

이 동작은 일반 (jQuery가 아닌) 이벤트 핸들러와 다르며, 특히 return false이벤트가 버블 링되는 것을 중지하지 않습니다.

preventDefault ();

---

preventDefault(); 한 가지를 수행합니다. 브라우저의 기본 동작을 중지합니다.

언제 사용합니까?

---

우리는 그들이 무엇을하는지 알고 있지만 언제 사용해야합니까? 단순히 달성하고자하는 것에 달려 있습니다. preventDefault();기본 브라우저 동작을 "단지"방지하려는 경우 사용 합니다. return false를 사용하십시오. 기본 브라우저 동작을 방지하고 이벤트가 DOM을 전파하지 못하도록하려는 경우. 사용하는 대부분의 상황에서 return false; 당신이 정말로 원하는 것은 preventDefault().

예 :

---

예를 들어 이해해 보겠습니다.

순수한 JAVASCRIPT 예제를 볼 것입니다.

예 1 :

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

위의 코드를 실행하면 '여기를 클릭하여 stackoverflow.com을 방문하십시오' 라는 하이퍼 링크가 표시 됩니다. 해당 링크를 먼저 클릭하면 자바 스크립트 알림이 표시됩니다. 링크 클릭 됨 다음으로 자바 스크립트 알림 div를 클릭 하면 바로 리디렉션됩니다. stackoverflow.com.

예 2 :

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

위의 코드 하이퍼 링크를 볼 수 있습니다 실행 해당 링크를 클릭하면 먼저 자바 스크립트 경고 얻을 것이다 이제 'stackoverflow.com 방문하려면 여기를 클릭하십시오' 링크 클릭 수 는 자바 스크립트 경고 얻을 것이다 다음 DIV 클릭 된 다음 하이퍼 링크를 '볼을 여기를 클릭하여 stackoverflow.com을 방문하십시오 .'Click event prevented '텍스트로 바뀌면 stackoverflow.com 으로 리디렉션 되지 않습니다 . 이는> 기본 클릭 동작이 트리거되는 것을 방지하는 데 사용한 event.preventDefault () 메서드 때문입니다.

예 3 :

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event is going to be executed'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

이번에는 Link를 클릭하면 executeParent () 함수가 호출되지 않으며 이번에 는 javascript 경고 div Clicked 가 표시되지 않습니다 . 이는 event.stopPropagation () 메서드를 사용하여 부모 div 로의 전파를 막았 기 때문입니다. 다음으로 'Click event is going to be execute'텍스트로 대체 된 'Click here to visit stackoverflow.com'하이퍼 링크가 표시되고 즉시 stackoverflow.com으로 리디렉션됩니다. 이는 event.preventDefault () 메서드를 사용하여 이번에는 기본 클릭 동작이 트리거되는 것을 막지 않았기 때문입니다.

예 4 :

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

If you click on the Link, the function executeParent() will not be called and you will not get the javascript alert. This is due to us having prevented the propagation to the parent div using event.stopPropagation() method. Next you will see the hyperlink ‘Click here to visit stackoverflow.com‘ replaced by the text ‘Click event prevented‘ and you will not be redirected to stackoverflow.com. This is because we have prevented the default click action from triggering this time using event.preventDefault() method.

Example 5:

For return false I have three examples and all appear to be doing the exact same thing (just returning false), but in reality the results are quite different. Here's what actually happens in each of the above.

cases:

1. Returning false from an inline event handler prevents the browser from navigating to the link address, but it doesn't stop the event from propagating through the DOM.
2. Returning false from a jQuery event handler prevents the browser from navigating to the link address and it stops the event from propagating through the DOM.
3. Returning false from a regular DOM event handler does absolutely nothing.

Will see all three example.

1. Inline return false.

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='return false'>Click here to visit stackoverflow.com</a>
</div>
<script>
  var link = document.querySelector('a');

  link.addEventListener('click', function() {
    event.currentTarget.innerHTML = 'Click event prevented using inline html'
    alert('Link Clicked');
  });


  function executeParent() {
    alert('Div Clicked');
  }
</script>

2. Returning false from a jQuery event handler.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href='http://stackoverflow.com'>Click here to visit stackoverflow.com</a>
</div>
<script>
  $('a').click(function(event) {
    alert('Link Clicked');
    $('a').text('Click event prevented using return FALSE');
    $('a').contents().unwrap();
    return false;
  });
  $('div').click(function(event) {
    alert('Div clicked');
  });
</script>

3. Returning false from a regular DOM event handler.

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
    return false
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

Hope these examples are clear. Try executing all these examples in a html file to see how they work.

참고URL : https://stackoverflow.com/questions/30473581/when-to-use-preventdefault-vs-return-false