事件处理程序返回真正的Javascript jQuery_Javascript_Jquery_Event Handling_Return

事件处理程序返回真正的Javascript jQuery

javascript jquery

事件处理程序返回真正的Javascript jQuery,javascript,jquery,event-handling,return,Javascript,Jquery,Event Handling,Return,首先，大家好，我的英语很抱歉。当然，我并不完全理解事件处理程序中return的用法。如果可能的话，我希望得到这方面的一些澄清。在本文档中，我有som嵌套元素。每个元素都有一个事件处理程序，在冒泡阶段将同一元素涂成红色。我的问题是：为什么使用jQuery我可以用return false停止事件传播，而使用whit javascript我不能做同样的事情？欢迎阅读任何建议，谢谢大家。 <!DOCTYPE HTML> <html> <head> <

首先，大家好，我的英语很抱歉。
当然，我并不完全理解事件处理程序中return的用法。
如果可能的话，我希望得到这方面的一些澄清。
在本文档中，我有som嵌套元素。
每个元素都有一个事件处理程序，在冒泡阶段将同一元素涂成红色。
我的问题是：为什么使用jQuery我可以用return false停止事件传播，而使用whit javascript我不能做同样的事情？
欢迎阅读任何建议，谢谢大家。

<!DOCTYPE HTML>
<html>
<head>
<style>
.x{border-radius:250px;position: absolute;background-color:#CCC;border:1px solid #666;top: 24px; left: 24px;}
#el1{height: 200px;width: 200px;}
#el2{height: 150px;width: 150px;}
#el3{height: 100px;width: 100px;}
#el4{height: 50px;width: 50px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    // first snippet i can't use return false
    function init(){
        var elements = document.getElementsByClassName('x')
        for(var i=0; i<elements.length; i++) {
          elements[i].addEventListener('click',function(e){
            this.style.backgroundColor='red'
            alert("clik")
             /*return false*/
          },false)
           /* return false*/
        }
    }
    document.addEventListener('DOMContentLoaded',init,false);
    // second snippet i can use return false
    /*$(document).ready(function(){
        $('div.x').click(function(){
            $(this).css({'background-color':'red'})
            alert("clik")
            return false
        })
    })*/
</script>
</head>
<body>
<div id="el1" class="x">
  <div id="el2" class="x">
    <div id="el3" class="x">
      <div id="el4" class="x"></div>
    </div>
  </div>
</div>
</body>
</html>


.x{边框半径：250px；位置：绝对；背景色：#CCC；边框：1px实心#666；顶部：24px；左侧：24px；}
#el1{高度：200px；宽度：200px；}
#el2{高度：150px；宽度：150px；}
#el3{高度：100px；宽度：100px；}
#el4{高度：50px；宽度：50px；}
//第一个代码段我不能使用return false
函数init（）{
var elements=document.getElementsByClassName（'x'）
对于（变量i=0；i
$（“#a”）。单击（函数（）{
返回false；
});
document.getElementById（“a”）.onclick=function（）{
返回false；
}
document.getElementById（“a”）.addEventListener（“单击”），函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
//在上述两种方法中，使用相同的函数返回false。
}，假）；
@A.Wolff:谢谢你的回答，可能我不太清楚。我知道我可以使用停止传播，但想知道为什么我不能在javascript中使用return true，谢谢。耶，对不起，误读了你的问题。那是因为return false；
是一个jQuery“东西”，而不是javascript。jQuery处理它的方式如下：if（ret！==未定义）{if（（event.result=ret）==false）{event.preventDefault（）；event.stopPropagation（）；}}
因此，如果从处理程序返回false，jQuery将其作为event.preventDefault（）；event.stopPropagation（）处理；在jQuery中返回false与在普通javascript中返回false不同。jQuery捕获返回值，如果返回值为false，则在返回布尔值之前执行preventDefault和stopPropagation。在普通javascript中，您只返回布尔值false，这意味着什么也没有，没有调用p的内置构造reventDefault和stopPropagation@adeneo:我理解你的答案，谢谢，但是如果我在javascript中输入return false（代码段中第二个带注释的return），为什么外部div是彩色的，而不是中央div？谢谢
<a href = "http://stackoverflow.com/" id = "a">http://stackoverflow.com/</a>

$("#a").click(function(){
    return false;
});

document.getElementById("a").onclick = function(){
    return false;
}

document.getElementById("a").addEventListener("click",function(e){
    e.stopPropagation();
    e.preventDefault();
    //the same function to "return false" in the above two method.
},false);