Question

我在listview中包含以下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（）事件来生成列表。

Answer 1

只需在图片中添加点击处理程序。

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

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

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

以上代码可以替换为

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

check here for a demo。没有实际的图像。

稍微超出所要求的内容，请查看此What's the difference between event.stopPropagation and 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'标记的hanlder没有被触发（因此alert(1)没有显示出什么），但它会保留链接标记的默认行为以跟随链接。所以你要添加它们，或者删除它们，然后在末尾添加

return false;

check demo

jquery mobile取消listview中的点击事件

1 个答案: