listview中的jquery mobile取消单击事件

我在listview中包含以下HTML片段。listview中的每个元素都以缩略图开始

<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事件绑定到允许我访问事件对象的函数。listview中将有多个拇指，列表将动态生成以响应另一个事件。加载页面时，我使用pagebeforeshow（）事件来生成列表。

只需在图像中添加一个单击处理程序即可

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

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

preventDefault（在您的情况下，它不会做任何事情，因为img标记上没有事件。）

stopPropagation（它是您想要的。这将停止事件的冒泡-冒泡的意思是调用您的img所在的标记的处理程序。）

上述代码可以替换为

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

。没有真实的图像

超出要求的范围，检查这个

更新

$('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);
});

这是对的。在jQuery1.7之后，您可以使用on进行这种绑定（这将负责动态元素的绑定）

不过我做了一个改变。由于on（）的工作方式不同，我添加了e.preventDefault。虽然“a”标记的handler没有被触发（因此

警报（1）

没有显示任何内容），但它会保留链接标记的默认行为以跟随链接。因此，您可以同时添加它们，或者删除它们，然后在末尾添加

return false; 

---

该代码取决于存储路径大型img的位置。但是这里有一个提示

$（文档）
preventDefault（）
在这里是必不可少的，如果您添加到锚的链接，它将被触发。首先调用img处理程序，因此stoptro。。防止冒泡。@54不客气。您可以将img路径保存为自定义属性，如
data img=../gallery/img.jpg
，然后检索它
$（this.data（'img'）
@mlewis54以这种方式绑定事件
$（文档）。在（'click'，'.selector'，function（）
否，它仍然有这种奇怪的行为，并且对动态元素不起作用。on（）必须有一个静态元素作为开始（初始选择器）。我认为这是一个好问题