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();

Answer 2

问题描述的我没明白

Answer 3

你写的是事件委托的方式，而实际要解决的是事件冒泡的问题，
可以这样写：
$("#gray").on("click", null, "我是事件啊，次数是", info);
$("#yellow").on("click", function (e) {

e.stopPropagation();

});