Question

HTML代码如下（img适合div父级）：

<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时，它会显示type = img。

Answer 1

我不确定你的意图是什么。也许你确实需要一个文字的img标签。

你有几种选择。保持JS原样，您可以将图像设置为背景图像。您仍然可以使用css进行缩放。询问是否不确定，我可以告诉你。

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

编辑：之所以发生这种情况，是因为图像正在设置房地产。我假设看不见（在你的例子中）父级没有填充，因此在大多数情况下它是不可点击的，并且你几乎在所有场景中都点击图像而不是父图像。

Answer 2

根据您的评论编辑...尝试下面的代码段（仅添加CSS以显示不同的元素）

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Jquery Click事件不会触发与后代img大小相同的paranet div？

2 个答案: