return false
event.preventDefault()

说明:在js代码中经常看到的代码是return false和event.preventDefault(),这个两个是有区别是,其中return false是包含了下面的代码内容:

1.event.preventDefault()
2.event.stopPropagation()
3.停止回调函数执行并立即返回。

其中event.preventDefault是为了阻止默认的行为,比如点击链接的内容,使用event.preventDefault防止到其他网页中,而event.stopPropagation是阻止了事件冒泡。

event.preventDefault: 阻止了默认的行为
event.stopPropagation: 阻止了事件冒泡,如果子类执行了该方法,则相应的父类将不能执行方法

举例说明

#下面的代码正确,获取链接的内容,置于并行的对象中
<div class="post">
    <a href="/welcomes/one">Click here to load page1</a>
    <div class="content">
    </div>
</div>

<div class="post">
    <a href="/welcomes/two">Click here to load page2</a>
    <div class="content">
    </div>
</div>

<%= content_for :javascripts do %>
  <script>
    $(document).on('turbolinks:load', function () {
      $("div.post a").click(function() {
        var href = $(this).attr("href");
        $(this).next().load(href);
          return false;
      });
    });
  </script>
<% end %>
#如使用return false则无效,子类$("div.post a")定义了event.stopPropagation()方法,则父类$("div.post")定义方法无效
<div class="post">
    <a href="/welcomes/one">Click here to load page1</a>
    <div class="content">
    </div>
</div>

<div class="post">
    <a href="/welcomes/two">Click here to load page2</a>
    <div class="content">
    </div>
</div>

<%= content_for :javascripts do %>
  <script>
    $(document).on('turbolinks:load', function () {
      $("div.post a").click(function(e) {
        var href = $(this).attr("href");
        $(this).next().load(href);
        //使用return false无效
        e.preventDefault();
      });

      $("div.post").click(function(){
        $("div.post .content").hide();
        $(this).children(".content").show();
      });
    });
  </script>
<% end %>

results matching ""

    No results matching ""