3

我在列表视图中包含以下 HTML 片段。列表视图中的每个元素都以缩略图开头。

<li>
<a href="javascript:alert("don't want to see this alert);" >
<img src="/images/testimage_thumb.png" onclick="displayImage('/gallery/testimage.jpg');">
<h4>Test Image</h4>
<p>Description of test Image</p>
</a>
</li>

<li>
<a href="javascript:alert("don't want to see this alert either);" >
<img src="/images/testimage2_thumb.png" onclick="displayImage('/gallery/testimage2.jpg');">
<h4>Second Test Image</h4>
<p>Description of the Second Test Image</p>
</a>
</li>

像冠军一样工作（至少在展示方面）。我希望能够让用户单击缩略图以显示更大的图像并且不触发底层锚链接（在这种情况下显示警报消息）。

我确定答案在于 preventDefault()，只是不确定如何将 click 事件绑定到允许我访问事件对象的函数。列表视图中将有多个拇指，并且列表是动态生成的以响应另一个事件。我在加载页面时使用 pagebeforeshow() 事件来生成列表。

4

1 回答 1

5

只需将点击处理程序添加到您的图像。

$('img.ui-li-thumb').click(function(){
    alert('I am the image');
    return false;
});

这会将单击处理程序绑定到具有 ui-li-thumb 类的图像。基本上所有的图像都是缩略图。如果需要，可以进一步自定义选择器以将其应用于特定的 ul。这是jqm动态添加的一个类。return false 将调用

  1. preventDefault （在您的情况下，它不会做任何事情，因为 img 标签上没有事件。）
  2. stopPropagation （它是你想要的。这将停止事件的冒泡 - 通过冒泡我的意思是调用你有你的 img 的 a 标签的处理程序。）

上面的代码可以替换为

$('img.ui-li-thumb').click(function(e){
    e.stopPropagation();
    alert('I am the image');
});

在这里查看演示。没有实物图。

并且超出了所要求的范围，请检查此event.stopPropagation 和 event.preventDefault 之间有什么区别？

更新

$('img.ui-li-thumb').click(function(e){
    e.stopPropagation();
    alert(this.src);
});

更新 2

我的错，OP说应该考虑动态元素。

$('div[data-role="content"]').on('click', 'a', function(){

    alert(1);
});

$('div[data-role="content"]').on('click', 'img.ui-li-thumb', function(e){
   //e.preventDefault();
    e.stopPropagation();
    alert(2);
});

这是正确的。在 jquery 1.7 之后，您可以使用 on 进行这种绑定（这将处理动态元素上的绑定）。

不过我做出了改变。由于 on() 的工作方式不同，我添加了 e.preventDefault。虽然 'a' 标记的处理程序没有被触发（因此alert(1)没有显示任何内容），但它保留了链接标记的默认行为以跟随链接。因此，您将它们都添加，或者将它们删除，然后在最后添加

return false;

检查演示

于 2013-06-12T21:03:18.190 回答