phpstudy集成环境

 首页 > 用return false;的时候需要的问题，不知道是不是我理解有误

用return false;的时候需要的问题，不知道是不是我理解有误

现在有1个页面上有2个js，a和b，a给页面上所有有id的元素绑了一个click事件，b单独给一个特定id的元素绑了一个click事件，并且在方法最后有一个return false;，按我的理解，return false;应该是阻止冒泡的，应该是从点击的元素开始层层向上的，但是最后的情况是，包括这个有特定id的元素本身和它的有id的子节点、有id的父节点，统统都不会触发a中绑定的click事件，只要去掉return false;就一切正常，证明确实是return false;产生的效果

return false;为什么会有这样的效果呢

补充一下吧，我是知道return false;有阻止冒泡的效果的，这个不用再回答了，我问的是，为什么阻止冒泡连子节点的也阻止了，难道不是应该从下往上一层一层的来吗？

div>samp>a>img，大概是这样的层级，b这个js在samp标签上绑的事件return false;，a这个js在这4个标签上的事件都不触发，无论子节点还是父节点还是本身

这个你要看jQuery的源码，jQuery肯定是对事件进行了封装，自己在trigger方法中使用apply来调用回掉，然后对方法的返回值进行判断；我们可以看jQuery(v2.1.4)的development版源码，在源文件4354行可以看到：

handle = ontype && cur[ ontype ];
            if ( handle && handle.apply && jQuery.acceptData( cur ) ) {
                event.result = handle.apply( cur, data );
                if ( event.result === false ) { //判断了返回值为false的情况
                    event.preventDefault();  //阻止事件
                }
            }

补充回答：
以上是关于使用jQuery进行事件监听时jQuery对回调函数返回值的处理，另外针对JS直接操作DOM的情况，如

   <a href='to/some/url' onclick='alert(1); return false>Test</a>

这种情况也会阻止默认的事件处理方式，比如这个例子中 A 标签不会跳转。这种情况要看浏览器对 DOM 3中事件的实现。

W3 DOM3标准原文中 UI Events (formerly DOM Level 3 Events) 第3.2节有例4下面有注释说明：

Authoring Note: Many implementations additionally interpret an event listener's return value, such as the value false, to mean that the default action of cancelable events will be cancelled (though window.onerror handlers are cancelled by returning true).

大致是说，有些实现（对标准的实例化），会对事件回掉函数的返回值进行判断，如果返回 false， 那么就阻止默认操作。
所以，return false应该是这么个理解法吧。

至于你说的父级元素上preventDefault为什么会波及子元素上的事件监听，这个应该属于DOM 2事件的捕获和冒泡的机制了。
这个文章对描述的比较清楚，你可以参考 JS事件-ITEYE有助于理解，这次先补到这里，至于到底return false在哪个环节让子元素对事件放弃处理，以后再补吧。

$('a').on('click', function() {
    return false;
});

等同于：

$('a').on('click', function(event) {
    event.preventDefault();
});

1)添加的事件代理机制是在事件冒泡到最顶层的时候才会被触发
2)return false影响其所在的div的事件的传播，事件只有一个，一旦被阻止传播，那么其父节点的事件监听器就不会被触发,也就是添加的事件委托绑定的处理函数就不会被触发

<div id="dOuter" style="width:250px;height:350px;background-color:green;padding:5px;">

    <div id="d2" style="width:50px;height:50px;background-color:pink;">d2</div>
    <div id="d3" style="width:50px;height:50px;background-color:red;">d3</div>
    <div id="d4" style="width:50px;height:150px;background-color:yellow;">
        <div id="d4_1" style="width:50px;height:50px;background-color:gray;">d4_1</div>
        <div id="d4_2" style="width:50px;height:50px;background-color:lightgray;">d4_2</div>
        <div id="d4_3" style="width:50px;height:50px;background-color:blue;">d4_3</div>
    </div>
    <div id="d5" style="width:50px;height:50px;background-color:yellow;">d5</div>

</div>
<script>

$('body').on("click","div[id]",function(){
    console.log($(this).attr("id"));
});
$("#d4_1").bind("click",function(){
    console.log($(this).attr("id"));
});
$("#d4_2").on("click",function(event){
    console.log(event.target);
    console.log(event.currentTarget);
    return false;
    //console.log(window.opener);
    //$("#"+window.opener.document.getElementById("d1")).trigger("myEvent");
});
</script>

由href return false 来看阻止默认事件

【热门文章】
【热门文章】