CODEWITHSUNDEEP
javascriptjqueryinternet-explorerevent-handlingevent-bubbling
Chris Sobolewski
Chris Sobolewski

Reputation: 12925

JQuery .click() event, very odd behavior in IE 8&9

I've created a video gallery which loads a Youtube video via swfobject, based on the element's data attributes. It functions quite well in all browsers, except IE. The strange behavior I am seeing doesn't make sense.

The markup for each thumbnail is as follows:

<li>
    <div class="movie-image">
        <a class="" data-videotitle="Title" data-videoid="$node.contribution('video')" href="http://www.youtube.com/watch?v=41ZskpgQqZ4">
            <img class="video-link" data-videotitle="Title" data-videoid="41ZskpgQqZ4" src="http://img.youtube.com/vi/41ZskpgQqZ4/default.jpg" alt="Title">
            <h5>Title</h5>
        </a>
    </div>
</li>

With this javascript binding the event:

$('.video-link').click(function(){
    player.setVideo(this.getAttribute("data-videoid"), true);
    player.setTitle(this.getAttribute("data-videotitle"));
    window.event.returnValue = false; //IESUX
    if(window.event.stopPropagation) window.event.stopPropagation();
    window.event.cancelBubble = true;
    //Yes, there's a lot of redundancy here. None has worked.
    return false;
})

Now, here's the weird part: When I click a link in any browser except IE, the event works fine.

However, in IE, if I click on the h5 element, everything works fine. If I click on the image, however, the browser navigates to the thumbnail. Which is really odd, since that's not even the target of the link.

EDIT: I forgot to mention, I am stuck using JQuery 1.4.2 on this particular webpage.

Edit 2: Well... crap. I just tried putting together a fiddle to show the problem, but the fiddle is working fine, even with the old version of JQuery.

Upvotes: 1

Views: 2162

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191729

jQuery wraps the event object and gives it methods that do what you're trying to do only better:

$(".video-link").click(function (e) {
   player.setVideo(this.getAttribute("data-videoid"), true);
   player.setTitle(this.getAttribute("data-videotitle"));
   e.stopPropagation();
   e.preventDefault();
});

Note that return false is explicitly left out -- you don't need it.

My guess is that IE is either throwing some sort of error that stops the JS execution and ends up following the link, or the default action is not properly being stopped.

Upvotes: 3

Related Questions