stopPropagation似乎不起作用

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

我正在尝试在具有click事件的DIV块内部实现链接。

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

如果用户点击链接,我希望外部DIV点击事件不会运行。

My link looks like:

我的链接如下:

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

And javascript looks like:

和javascript看起来像:

 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 stopPropogation method:

不幸的是,当我点击链接时,它会执行外部DIV代码。并显示与stopPropogation方法相关的错误:

Uncaught TypeError: Cannot call method 'stopPropagation' of undefined

What could be the issue?

可能是什么问题?

4 个解决方案

#1

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

因为没有被调用的事件。尝试这样称呼它:

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

#2

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.

我看到你正在使用jQuery。它并不意味着以这种方式使用。您传递的事件对象是浏览器的本机事件对象。 jQuery的事件对象提供了stopPropagation函数。

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

要适当地使用jQuery,必须让jQuery绑定事件而不是内联。

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

编辑:使用jQuery 1.4.3或更高版本,您可以使用委托,这样您就不必将事件直接附加到锚点,而是附加到其祖先之一。 (jQuery 1.7使用.on方法来实现相同的功能)。以下是使用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()

您使用委托支付了一小部分性能损失,因此请尝试将事件放在DOM中可能的最低元素上。此外,如果你将代理放在文档上,你就不能真正停止传播,因为它已经达到顶峰,尽管我相信你真的更关心的是preventDefault()

#3

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

编辑:我说谎; stopPropagation不是jQuery独有的。转到j08691的答案。

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

据我所知,stopPropagation是一个jQuery函数,这意味着你需要一个jQuery事件处理程序创建的事件对象来调用它。

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.

当然,拿我刚才写的东西,因为我已经朦胧的知识,并没有查找它。

#4

-2

Try

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

#1