event.stopPropagation not working

Question

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

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

where are you getting `event` from? you need to pass it through to the function as a variable — Pete, Nov 12 '13 at 11:16
How is that image going to be clicked, when it's parent isn't displayed? — George, Nov 12 '13 at 11:16

score 18 · Accepted Answer · answered Nov 12 '13 at 11:13

18

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 e refers to the event in all browsers and you can access the event.

answered Nov 12 '13 at 11:13

palaѕн

72,112
17
116
136

Is that should comes before ajax call. – Arvin Nov 12 '13 at 11:19
1

he can also pass the event in the call, ` onclick="downloadAsset('#UUID#', event)"` – reyaner Nov 12 '13 at 11:20
1

Yes, it will be called before ajax call and it will not prevent the ajax call from executing from anyways... – palaѕн Nov 12 '13 at 11:21

Rory McCrossan · Answer 2 · 2017-01-06T16:39:53.833

Firstly your HTML is invalid, as your a element has no name or href attribute. Secondly, if you're using jQuery for logic, you may as well use it to hook up your events:

<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..
    });
});

Adding the e.preventDefault(); Fixed it for me. Thanks – Sean Fleming Sep 09 '16 at 18:24 — Sean Fleming, Sep 09 '16 at 18:24

score 2 · Answer 3 · answered Nov 12 '13 at 11:21

2

You can change this:

DownloadAsset(AssetId)

to this:

DownloadAsset(AssetId, event)

answered Nov 12 '13 at 11:21

Jai

74,255
12
74
103

score 0 · Answer 4 · answered Nov 12 '13 at 11:11

0

You may also need to return false from the DownloadAsset function

answered Nov 12 '13 at 11:11

Rob Willis

4,706
2
28
20

2

This is really more of a comment than an answer. – Daft Mar 06 '15 at 16:58

event.stopPropagation not working

4 Answers4

Linked