可能有一个角带覆盖部分的图像的haddle单击事件

Question

我有一个id为项目的div，手里拿着一堆引导卡，每张都有一个标签，有些后面跟着

<div class="ribbon"><span>Sale</span></div>

它在图像的右上角放置一个CSS功能区，指示该商品正在出售。

我有一个Jquery在("click"，"img"，function()上

$("#items").on("click", "img", function () {
var path = $(this).attr('alt');
if (path != "none") {
$('#model-image-img').attr('src', path);
$('#model-title').text($(this).attr('data-title'));
$('#model-image').modal('show');
} else {
return false;
}

无论何时点击，都会打开一个带有较大版本图像的模态。

如果图像的右上角恰好有一个功能区，并且光标位于单击鼠标时用于显示功能区的100px x 100px框上，则不会发生任何事情。

当鼠标在功能区上单击时，我该如何处理，以便打开模态并显示更大的图像？

Answer 1

您可以创建一个容器，比如<div class="offer">。你把你的形象和丝带放在报价里面。然后修改处理程序

$("#items").on("click", "div.offer", function () {
var path = $(this).find("img").attr('alt');
...

以使点击从报价部门触发。