Jquery 在与后代 img 具有相同大小的 paranet div 上没有触发点击事件？

Question

HTML代码如下（img适合divparent）：

<div id='draggable_task' style='display: inline-block; position: relative; overflow: hidden'>
    <img src='../Content/BPMN Icons/Big Icons/BigTask.png' />
    <p style='position: absolute; top: 20%; left:20%;'>Task name</p>
</div>

JavaScript代码如下（DrawArea为顶层容器）：

$("#DrawArea").on("click", function (e) {
    alert(e.target.nodeName);
});

当我点击 div 时，它显示类型 = img。

Answer 1

我不确定你这样做的目的是什么。也许您实际上确实需要文字 img 标签。

你有几个选择。保留 JS 原样，您可以将图像设置为背景图像。您仍然可以使用 css 对其进行缩放。如果不确定就问，我可以给你看。

此外，您可以让 .on() 在图像而不是图像的父级上触发。

编辑：发生这种情况的原因是图像设置不动产。我假设看不见的（在您的示例中）父级没有填充，因此在大多数情况下它是不可点击的，并且在几乎所有情况下您都会单击图像而不是父级。

Answer 2

已根据您的评论进行了编辑...试试下面的代码片段（CSS 添加只是为了显示不同的元素）

$("#DrawArea").on("click", function (e) {
    alert($(e.target).closest('div').attr('id'));
});

#DrawArea{
    background:#0000cc;
}
#draggable_task{
    background:#cc0000;
}
p{
    background:#00cc00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="DrawArea">

<div id='draggable_task' style='display:inline-block;position: relative;overflow: hidden'>
    <img src='http://www.placehold.it/350x150'/>
     <p style='position: absolute; top: 20%; left:20%;'>Task name</p>
 </div>
    
</div>

Jquery 在与后代 img 具有相同大小的 paranet div 上没有触发点击事件？

Jquery Click event dosen't fire on paranet div that has same size as descendent img?

jquery

event-handling

javascript-events