我预想的是让 灰色-绿色 这个范围有事件,
怎么弄出来后,实际情况是 绿色-蓝色 有事件?
<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);
}
问题描述的我没明白
你的写法会对 #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();
你写的是事件委托的方式,而实际要解决的是事件冒泡的问题,
可以这样写:
$("#gray").on("click", null, "我是事件啊,次数是", info);
$("#yellow").on("click", function (e) {
e.stopPropagation();
});