jQuery 请我这个我想让 灰色 到 绿色 这个范围有事件,结果和预想不一样,怎么回事?

Question

我预想的是让 灰色-绿色 这个范围有事件,

怎么弄出来后,实际情况是 绿色-蓝色 有事件?

    <div class="gray" id="gray">
        <div class="red jz" id="red">
            <div class="green jz" id="green">
                <div class="yellow jz" id="yellow">
                    <div class="blue jz" id="blue">
                    
                    </div>
                </div>
            </div>
        </div>
    </div>

我的理解是,语法是这样
    $("冒泡父起始选择器").on("事件","冒泡子结尾选择器",'Function参数',FunctionName);

我是这样写的:
    $("#gray").on("click","#green",'我是事件啊,次数是',info);    

        var a = 0;        function info(e)        {
            a = a + 1;
            str = e.data + ':' + a ;
            $("span").text(str);
        }

Answer 1

你的写法会对 #green 和它内部的元素触发事件，应该这么写$(() => {   $green = $("#green");   $("#gray").on("click", (e) => {      var $t = $(e.target);      if (!$t.is($green) && $t.closest($("#green")).length) {          return;       }      console.log("hello", e.target);   }); });来 jsfiddle 上看示例https://jsfiddle.net/gus1zaj7/3/稍稍改了一下，改成点击之后弹框。如果要阻止里面的事件冒泡，可以把 return 改成 return false，或者加个 e.stopPropagation();