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>

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是not a jQuery exclusive。使用j08691's answer。

~~据我所知，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 ();
        });

stopPropagation似乎不起作用

4 个答案: