jQuery放大镜和单击事件

Question

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

谢谢!

Answer 1

我不熟悉这个特殊的插件，但是您不能简单地附加您自己的click事件处理程序吗？

给定此标记(基于the plugin's GitHub repo上的演示)：

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

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

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

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

Answer 3

如果你想要loupe转到原始img标签的锚标签父标签，那么尝试这个，如果不起作用，向所有原始图像添加一个类，并在img之前添加到选择器。

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