event.stopPropagation無效

Question

我正在使用視頻預覽系統。 我的源代碼片段是

<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>

有一個功能可以在單擊li時預覽視頻。它是動態的，沒有問題。但是如果我cli在li里面的下載按鈕，li和下載按鈕的功能都正常工作，這意味着預覽正在不合需要地改變。 為了避免這種情況，我在下載代碼后添加了以下函數

event.stopPropagation();

代碼看起來像

function Download(Id) {    
    $.ajax({
        type: "POST",
        url: "MyWebMethods.asmx/Download",
        data: { "Id": Id}
    }).complete(function (data) {

    });
    event.stopPropagation();
}

但這兩個功能仍然有效

Answer 1

你可以這樣做：

function DownloadAsset(AssetId, e) {

    if (!e) var e = window.event
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();

    // your ajax call
    $.ajax({....})
}

其中e指的是所有瀏覽器中的事件，您可以訪問該事件。

Answer 2

首先，您的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..
    });
});

Answer 3

你可以改變這個：

DownloadAsset(AssetId)

對此：

DownloadAsset(AssetId, event)

Answer 4

您可能還需要從DownloadAsset函數return false