javascript - stopPropagation 似乎不起作用

Question

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

如果用户单击链接，我希望外部 DIV 单击事件不运行。

我的链接看起来像：

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

和 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();
 }

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

Uncaught TypeError: Cannot call method 'stopPropagation' of undefined 

可能是什么问题？

Answer 1

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

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

​</p>

Answer 2

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

要正确使用 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>

编辑：使用 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>

使用委托会付出很小的性能损失，因此请尝试将事件放置在 DOM 中可能的最低元素上。另外，如果你把代理放在文档上，你不能真正停止传播，因为它已经到达顶部，虽然我相信你真的更关心preventDefault()

Answer 3

编辑：我撒谎了；stopPropagation不是jQuery 独有的。选择j08691的答案。

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

这是一种方法：

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

当然，对我刚刚写的东西持保留态度，因为我的知识模糊不清，根本没有查过。

Answer 4

尝试

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