技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

return false;和e.preventDefault();的区别

2011-04-15 10:27:21 by 【6yang】, 251 visits, 收藏 | 返回
Have you ever seen those two things (in the title) being used in jQuery? Here is a simple
 
 

Have you ever seen those two things (in the title) being used in jQuery? Here is a simple example:

复制代码 代码如下:

$("a").click(function() {
$("body").append($(this).attr("href"));
return false;
}


That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:

复制代码 代码如下:

$("a").click(function(e) {
$("body").append($(this).attr("href"));
e.preventDefault();
}


So what's the difference?


The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or “bubbling up”) the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well. So let's say you have a box inside a box. Both boxes have click events on them. Click on the inner box, a click will trigger on the outer box too, unless you prevent propagation. Like this:

演示地址:http://css-tricks.com/examples/ReturnFalse/
So in other words:

复制代码 代码如下:

function() {
return false;
}

// IS EQUAL TO

function(e) {
e.preventDefault();
e.stopPropagation();
}


It's all probably a lot more complicated than this and articles like this probably explain it all a lot better.

参考：

1.The difference between ‘return false;' and ‘e.preventDefault();'
2.Event order

测试代码打包下载

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>List date</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
body{
    font:14px/1.5 Verdana, Geneva, sans-serif;
    margin:0;
    padding:0;
    text-align:center;
}
a{
    color:#333;
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}
ul,li{
    list-style:none;
    text-align:left;
    padding:0;
    margin:0;
}

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap {
  width: 960px;
  margin: 80px auto;
}

#page-wrap div {
  width: 125px;
  height: 125px;
  border: 1px solid #ccc;
  padding: 30px;
  text-align: center;
  float: left;
  margin-right: 20px;
}

#page-wrap div a {
  display: block;
  width: 125px;
  height: 125px;
  border: 1px solid #ccc;
  line-height: 125px;
  padding: 0;
}

</style>
<script type="text/javascript" language="JavaScript">
$(function(){
    function fnGiftToFriendClickHandler(event){
        var str = $('#aa').data('cur', '12');
        //$("#dialog_asRecipientToFriend").data("openFrom", event.data.openFrom);
        //var openFrom = event.data.openFrom;
        var str1 = $('#aa').data('cur');   
        alertValue();
    }
    function alertValue(){
        alert($('#aa').data('cur'));
    }
    $('#curLnk').bind('click', fnGiftToFriendClickHandler);
   

// click and e.preventDefault
  $("#page-wrap div").click(function() {
 
    $(this).css("background", "red");
 
  });
 
    $("#box-one .inside").click(function(event) {
        e = (event) ? event : window.event;
        $(this).css("background", "green");
        //e.preventDefault();
       
        if(window.event){//IE    
            e.cancelBulle = true; //available for the link, except for link;
        } else { // FF
            e.stopPropagation();               
        }
   
    //e.stopPropagation();//the same return false;
    });
 
    $("#box-two .inside").click(function() {     
        $(this).css("background", "green");
        return false;
    });
});
</script>
</head>


<body>
 <a href="#" id="curLnk">click me</a>
 <div id="aa">aa</div>
 <div id='dialog_asRecipientToFriend'>fa</div>
<div id="page-wrap">

      <div id="box-one">

        <a href="http://google.com" class="inside">Click in here</a>
      </div>
     
      <div id="box-two">
        <a href="http://google.com" class="inside">Click in here</a>
      </div>
        <span onclick=alert("你好")>点我 <span>再点我</span></span><br><br>
        <span onclick=alert("你好")>点我 <a onclick=event.cancelBubble=true; href="aa.php">再点我</a> | <b onclick=event.cancelBubble=true; >再点我</b></span>

    </div>
</body>
</html>

 

分享到：
我要评论 本文来自:http://www.6yang.net/articles_view.php?cid=7&id=919
share

    图片原图

    loading

    loading