CODEWITHSUNDEEP
javascriptdom-events
Arturs Vancans
Arturs Vancans

Reputation: 4640

stopPropagation doesn't seem to be working

I am trying to implement a link inside of a DIV block which has a click event.

I would like the outer DIV click event not to run if the users clicks on the link.

My link looks like:

<a href="javascript: openVideo('videoID', this, event); " >Watch the video</a>

And JavaScript looks like:

 function openVideo(video, object, event) {
 
    $(object).html($(object).html()+"<iframe width='360' height='315' src='http://www.youtube.com/embed/"+video+"' frameborder='0' allowfullscreen></iframe>");
 
    event.stopPropagation();
 }

Unfortunately when I click on the link it executes the outer DIV code, and shows an error related to stopPropagation method:

Uncaught TypeError: Cannot call method 'stopPropagation' of undefined

What could be the issue?

Upvotes: 3

Views: 10661

Answers (4)

sparebytes
sparebytes

Reputation: 13096

I see you're using jQuery. It's not meant to be used in that manner. The event object you are passing is the browser's native event object. jQuery's event object provides a stopPropagation function.

To use jQuery appropriately, you must let jQuery bind the event instead of doing it inline.

<a href="#" class="openVideo" data-video="videoID" >Watch the video</a>

<script type='text/javascript'>
    $(document).ready(function() {
        $(".openVideo").click(function(ev) {
            ev.preventDefault();
            ev.stopPropagation();
            var videoID = $(this).data('video');
            $(this).append("<iframe width='360' height='315' src='http://www.youtube.com/embed/"+videoID+"' frameborder='0' allowfullscreen></iframe>");
        });
    });
</script>

Edit: with jQuery 1.4.3 or above you can use a delegate so you don't have to attach the event directly to the anchor but to one of its ancestors. (jQuery 1.7 uses the .on method to achieve the same thing). Here is an example using jQuery 1.7: http://jsfiddle.net/Tu9Hm/

<a href="#" class="openVideo" data-video="videoID" >Watch the video</a>

<script type='text/javascript'>
    $(document).ready(function() {
        $(document).on('click', '.openVideo', function(ev) {
            ev.preventDefault();
            ev.stopPropagation();
            var videoID = $(this).data('video');
            $(this).append("<iframe width='360' height='315' src='http://www.youtube.com/embed/"+videoID+"' frameborder='0' allowfullscreen></iframe>");
        });
    });
</script>

You pay a small performance penalty using delegates, so try to place the event on the lowest possible element in the DOM. Also, if you place the delegate on the document, you can't really stopPropagation since it has already reached the top, although I believe you're really more concerned about preventDefault()

Upvotes: 1

Dan Tao
Dan Tao

Reputation: 128317

Edit: I lied; stopPropagation is not a jQuery exclusive. Go with j08691's answer.

As far as I know stopPropagation is a jQuery function, which means you'd need the event object created by a jQuery event handler to call it.

Here's one way:

<a id="open-video-link" href="javascript: void(0);">Watch the video</a>

<script type="text/javascript">
  $("#open-video-link").click(function(event) {
    openVideo("videoID", this, event);
  });
</script>

Take what I just wrote with a grain of salt, of course, because I'm going off of hazy knowledge and didn't look it up at all.

Upvotes: 0

Ajay Singh Beniwal
Ajay Singh Beniwal

Reputation: 19037

Try 

 $("a").on("click", function (e) {
            e.stopPropagation ();
        });

Upvotes: -2

j08691
j08691

Reputation: 207861

Because there's no event being called. Try calling it like this instead:

<a href="#" onclick="openVideo('videoID', this, event); " >Watch the video</a>

​

Upvotes: 6

Related Questions