jquery mobile取消listview中的点击事件

Question

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

<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 所在的 a 标签的处理程序。）

上面的代码可以替换成

$('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' 标记的处理程序没有被触发（所以alert(1) 没有显示任何东西），它保留了链接标记的默认行为以跟随链接。因此，您将它们都添加，或者将它们删除，然后在末尾添加

return false; 

check demo