关于javascript：何时使用PreventDefault（）vs Return false？


When to use PreventDefault( ) vs Return false?

本问题已经有最佳答案，请猛点这里访问。

首先，在javascript的事件模型中，您将通过一个称为"事件冒泡"的概念(使事件从子级传播)元素到父元素)。为了避免这种冒泡效应，很多开发者使用名为stopPropagation( )的事件方法。或者，开发人员已经开始使用return false声明停止此类传播。现在，还有一个术语叫做preventDefault( )。顾名思义，这个方法阻止要触发的元素。最好的用例是防止锚定标记以打开链接。

你可能会遇到这样的情况希望阻止定位标记打开链接(默认行为)并停止从上到父级的事件。在这种情况下，不是写两行代码，你可以单列完成，即：return false。

相关讨论

返回错误；

当你称之为return false;时，它做了三件事：

  • event.preventDefault()–它停止浏览器的默认行为。
  • event.stopPropagation()–它防止事件传播(或"冒泡")DOM。
  • 停止回调执行并在调用时立即返回。

    • 请注意，此行为与普通(非jquery)事件处理程序不同，在正常(非jquery)事件处理程序中，return false不会阻止事件冒泡。

    preventDefault()；

    preventDefault();做了一件事：它停止浏览器的默认行为。

    何时使用它们？

    我们知道他们做什么，但什么时候使用他们？简单地说，这取决于你想完成什么。如果要"仅"阻止默认浏览器行为，请使用preventDefault();。如果要阻止默认浏览器行为并阻止事件传播DOM，请使用RETURN FALSE。在大多数情况下，你会使用返回错误；你真正想要的是preventDefault()。

    实例：

    让我们试着用例子来理解：

    我们将看到纯javascript示例

    例1：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
      Click here to visit stackoverflow.com


      function executeChild() {
        alert('Link Clicked');
      }

      function executeParent() {
        alert('div Clicked');
      }

    Run the above code you will see the hyperlink ‘Click here to visit
    stackoverflow.com‘ now if you click on that link first you will get
    the javascript alert Link Clicked Next you will get the javascript
    alert div Clicked and immediately you will be redirected to
    stackoverflow.com.

    例2：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
      Click here to visit stackoverflow.com


      function executeChild() {
        event.preventDefault();
        event.currentTarget.innerHTML = 'Click event prevented'
        alert('Link Clicked');
      }

      function executeParent() {
        alert('div Clicked');
      }

    Run the above code you will see the hyperlink ‘Click here to visit
    stackoverflow.com‘ now if you click on that link first you will get
    the javascript alert Link Clicked Next you will get the javascript
    alert div Clicked 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 due > to event.preventDefault() method we used to prevent the default click
    action to be triggered.

    例3：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
      Click here to visit stackoverflow.com


      function executeChild() {
        event.stopPropagation();
        event.currentTarget.innerHTML = 'Click event is going to be executed'
        alert('Link Clicked');
      }

      function executeParent() {
        alert('div Clicked');
      }

    This time if you click on Link the function executeParent() will not
    be called and you will not get the javascript alert div Clicked
    this time. 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 is going to be executed‘ and immediately you will be
    redirected to stackoverflow.com. This is because we haven’t prevented
    the default click action from triggering this time using
    event.preventDefault() method.

    例4：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
      Click here to visit stackoverflow.com


      function executeChild() {
        event.preventDefault();
        event.stopPropagation();
        event.currentTarget.innerHTML = 'Click event prevented'
        alert('Link Clicked');
      }

      function executeParent() {
        alert('Div Clicked');
      }

    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.

    例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.

    案例：

  • 从内联事件处理程序返回false会阻止浏览器导航到链接地址，但它不会阻止事件通过DOM传播。
  • 从jquery事件处理程序返回false会阻止浏览器导航到链接地址，并阻止事件通过DOM传播。
  • 从常规的DOM事件处理程序返回false完全不起作用。

    • 将看到这三个例子。

  • 内联返回false。

    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
      Click here to visit stackoverflow.com


      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');
      }

  • 从jquery事件处理程序返回false。

    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

      Click here to visit stackoverflow.com


      $('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');
      });

  • 从常规的DOM事件处理程序返回false。

    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
      Click here to visit stackoverflow.com


      function executeChild() {
        event.currentTarget.innerHTML = 'Click event prevented'
        alert('Link Clicked');
        return false
      }

      function executeParent() {
        alert('Div Clicked');
      }

    希望这些例子是清楚的。尝试在HTML文件中执行所有这些示例，以了解它们是如何工作的。

    相关讨论