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 %>