javascript - jQuery Loupe 和点击事件

Question

我目前正在使用放大镜插件来放大设置为图像地图的大型组织图片。通常，当用户单击此图像地图的一部分时，他们会被重定向，不幸的是，我找不到一种方法可以让放大镜响应用户单击图像地图上的链接。任何建议将不胜感激！

谢谢！

Answer 1

这是一个老问题，但答案很简单：-

只需将事件侦听器附加到类.loupe

$('.loupe').on('click', function (e) {
  e.preventDefault();
  alert('The Loupe link was clicked!');
});

Answer 2

我不熟悉那个特定的插件，但你不能简单地附加你自己的click事件处理程序吗？

鉴于此标记（基于插件的 GitHub 存储库中的演示）：

<div>
    <a class="demo" href="path/to/some/url">
        <img src="path/to/image" width="191" height="240" />
    </a>
    <img class="demo" src="path/to/image" width="191" height="240" />
</div>

您可以像这样附加点击处理程序：

$(function(){
    $('a.demo').on('click', function(e){
        // prevent the link from going anywhere (if that's what you want)
        e.preventDefault();

        // do something else...
        alert('The Loupe link was clicked!');
    });
});

编辑添加如果您正在使用图像映射，您可以简单地将单击事件处理程序附加到<area>元素，如下所示：

$('area').on('click', function(e){
    // stuff here
});

Answer 3

如果您希望放大镜转到原始 img 标记的锚标记父级，那么试试这个，如果这不起作用，请为所有原始图像添加一个类，并在 img 之前添加到选择器中。

$('.loupe').click(function(){   
      $("img[src='"+$(this).find('img').attr('src')+"']").parent()[0].click();
});