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