我有一个问题，我嵌套了具有相同类的 div。例如，我有类似面板的东西，在面板内部。但是，当我单击第一个面板内的面板时，它是第一个面板触发
$(".panel").click
功能。但是，我需要以某种方式深入到鼠标实际单击的面板。换句话说，如果我有以下代码:
<div class="panel"> //first panel
<div class="panel"> //second panel
</div>
</div>
当我希望第二个面板触发单击时，我会让父面板触发单击。考虑到第二个面板包裹在第一个面板中，这是有道理的。但是，我想知道是否有办法解决这个问题？理论上，我正在编写的代码可以在其他面板内包含无限数量的面板。有没有办法一直向下钻取到鼠标单击的面板？ (不是包含面板)
编辑:
这是整个代码段:
<style type="text/css">
body
{
height: 700px;
}
.gridSegment
{
width: 50%;
height: 50%;
float: left;
outline: 2px solid black;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var lastID = 10;
$(".gridSegment").dblclick(function(){
console.log($(this).attr("ID"));
lastID++;
$(this).append("<div class='gridSegment' id='" + lastID + "'></div>");
lastID++;
$(this).append("<div class='gridSegment' id='" + lastID + "'></div>");
lastID++;
$(this).append("<div class='gridSegment' id='" + lastID + "'></div>");
lastID++;
$(this).append("<div class='gridSegment' id='" + lastID + "'></div>");
return false;
});
});
</script>
</head>
<body>
<div class='gridSegment'>
<div class='gridSegment' id ="1"></div>
<div class='gridSegment' id ="2"></div>
<div class='gridSegment' id ="3"></div>
<div class='gridSegment' id ="4"></div>
</div>
</body>
最佳答案
Check out this example on jsFiddle (open your JavaScript console)
(please excuse the ugly colors - I'm a programmer not a designer ;).
$(function(){
$('.panel').on('click',function(e){
console.log($(this));
return false;
});
});
您所要做的就是在捕获点击时返回 false，以阻止事件冒泡回包含元素。
关于javascript - 嵌套同名Div，一键选择正确的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12106364/