CODEWITHSUNDEEP
javascriptjquery
Jitender
Jitender

Reputation: 7971

stopPropagation() not working

I want to stop bubbling when click on image. I cannot set javascript void on href as it is required. I have used stopPropagation but it is not working.

function showurl(e){
    e.stopPropagation()
    window.location="http://www.yahoo.co.in"
    }

<a href="http://www.google.com">
<img src="http://media.expedia.com/media/content/shared/images/navigation/expedia.co.in.png" onclick="showurl(event)" />
</a>

Upvotes: 0

Views: 200

Answers (2)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93551

As this was a jQuery question I would suggest never using onclick attributes. They only support a single handler and they are are "ugly" (read: harder to find and maintain) :)

$('img").onclick = function(e) {
     e.preventDefault();
     window.location="http://www.yahoo.co.in";
}

or

$('img").onclick = function() {
     window.location="http://www.yahoo.co.in";
     // return false here does the same as e.stopPropagation() and e.preventDefault();
     return false;
}

As this handler applies to all img elements, you may want to data-drive the whole thing (using attributes) like this:

Put the target url in the image as a data-url attribute

<a href="http://www.google.com">
<img src="http://media.expedia.com/media/content/shared/images/navigation/expedia.co.in.png"
     data-url="http://www.yahoo.co.in" />
</a>

And code-wise:

$('img").onclick = function(e) {
     // See if image has a data-url attribute
     var url = $(this).data('url');
     if (url){
         window.location=url;
         // only prevent default if it was an image with a link attribute
         e.preventDefault();
     }
}

Upvotes: 1

GillesC
GillesC

Reputation: 10874

I would suggest binding it from JS, even with a basic onclick then use return false; or use preventDefault. (demo)

document.getElementsByTagName("img")[0].onclick = function() {
    window.location="http://www.yahoo.co.in";
    return false;
}

HTML

<a href="http://www.google.com">
    <img src="http://media.expedia.com/media/content/shared/images/navigation/expedia.co.in.png" />
</a>

Upvotes: 0

Related Questions