jQuery Loupe 和点击事件答案

【问题标题】：jQuery Loupe and Click EventsjQuery Loupe 和点击事件
【发布时间】：2012-03-15 08:03:00
【问题描述】：

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

谢谢！

【问题讨论】：

标签： javascript jquery jquery-plugins loupe

【解决方案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
});

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

如果你想让放大镜到原始img标签的锚标签父级，那么试试这个，如果这不起作用，给所有原始图像添加一个类，并在img之前添加到选择器中。

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

【讨论】：