jquery mobile取消listview中的点击事件

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会调用

1. preventDefault(在你的情况下没有做任何事情,因为img标签上没有事件.)
2. stopPropagation(它就是你想要的.这将阻止事件的冒泡 - 通过冒泡我的意思是调用你有img的标签的处理程序.)

上面的代码可以替换为

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

点击这里查看演示.没有实际的图像.

并且稍微超出了所要求的内容,请检查event.stopPropagation和event.preventDefault之间的区别是什么？

UPDATE

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

检查演示