jQuery event.stopPropagation 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19927538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
event.stopPropagation not working
提问by Arvin
I am working with a video preview system. my source code snippet is
我正在使用视频预览系统。我的源代码片段是
<li id="liVideoList">
<div class="thumbitem">
<div>
<a>
<img alt="" src="images/download.png" onclick="download('ID')" title="Download" />
</a>
</div>
<img class="imagThumb" alt="Thumbs" class="thumb" src="#Path#" />
</div>
</li>
There is a function to preview the video on clicking the li.It is dynamically doing and no issue with that.But if i clik on the download button which is inside the li, both the functions of li and download button is working, which means the preview is changing undesirably. to avoid this I added the below function after the code of dowload
有一个功能可以在点击 li 时预览视频。它是动态执行的，没有问题。但是如果我点击 li 里面的下载按钮，li 和下载按钮的功能都在工作，这意味着预览正在发生不良变化。为了避免这种情况，我在下载代码之后添加了以下功能
event.stopPropagation();
and the code looks like
代码看起来像
function Download(Id) {
$.ajax({
type: "POST",
url: "MyWebMethods.asmx/Download",
data: { "Id": Id}
}).complete(function (data) {
});
event.stopPropagation();
}
but still both the functions are working
但仍然两个功能都在工作
回答by pala?н
You can do this:
你可以这样做：
function DownloadAsset(AssetId, e) {
if (!e) var e = window.event
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
// your ajax call
$.ajax({....})
}
Where erefers to the event in all browsers and you can access the event.
wheree指的是所有浏览器中的事件，您可以访问该事件。
回答by Rory McCrossan
Firstly your HTML is invalid, as your aelement has no nameor hrefattribute. Secondly, if you're using jQuery for logic, you may as well use it to hook up your events:
首先，您的 HTML 无效，因为您的a元素没有name或href属性。其次，如果您将 jQuery 用于逻辑，您也可以使用它来连接您的事件：
<li runat="server" id="liAssetList">
<div class="asset_thumbitem">
<div class="thumboptions" style="display: none;">
<a href="#"><img alt="Download" src="images/download_icon.png" data-asset="#UUID#" title="Download" /></a>
</div>
<img class="assetlist_imagThumb" alt="Thumbs" class="asset_thumb" src="#ThumbnailPath#" />
</div>
</li>
$('.thumboptions a').click(function(e) {
e.stopPropagation();
e.preventDefault();
var assetId = $('img', this).data('asset');
$.ajax({
type: "POST",
url: "ClientMethods.asmx/DownloadAssets",
data: { "AssetId": assetId}
}).complete(function (data) {
// do something..
});
});
回答by Jai
You can change this:
你可以改变这个：
DownloadAsset(AssetId)
to this:
对此：
DownloadAsset(AssetId, event)
回答by Rob Willis
You may also need to return falsefrom the DownloadAssetfunction
您可能还需要return false从DownloadAsset功能
