开发者问题收集

stopPropagation 似乎不起作用

2012-06-25
10590
javascript dom-events

我试图在具有点击事件的 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 代码，并显示与 stopPropagation 方法相关的错误：

Uncaught TypeError: Cannot call method 'stopPropagation' of undefined

可能是什么问题？

3个回答

因为没有调用任何事件。请尝试像这样调用它： 

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

​

j08691
2012-06-25

我看到您在使用 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()

sparebytes
2012-06-25

编辑 ：我撒谎了； 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>

当然，请谨慎对待我刚刚写的内容，因为我的知识很模糊，根本没有查过。

Dan Tao
2012-06-25