1

所以我有一个有趣的问题。

我有这个 html 代码（请原谅内联样式，它最适合网站）：

<div id="videopage">
<div class="videoframe" source="http://www.youtube.com/embed/8Kb6xcyclPU?rel=0" style="float:left;width:135px;height:101px;border:5px solid #555;border-radius:5px;position:relative;background:#555555;">
<img style="position:absolute;cursor:pointer;" src="/wp-content/themes/casterconcepts/images/vid-thumbs/casters-and-wheels.jpg" /><div class="close" style="width: 40px;height: 40px;border-radius: 20px;background: #9b9b9b;opacity: 0.5;position: absolute;bottom: -20px;right: -20px;color: white;text-align: center;line-height: 38px;font-size: 35px;opacity:0;display:none;cursor:pointer;">&#10006;</div>
</div>
</div>

这个javascript代码：

$(function(){
  $("#videopage .videoframe").click(function(){
    var source = $(this).attr("source");
    $(this).children("img").animate({opacity:0},300)
    .parent().delay(500).animate({width:"400px",height:"300px"},500).append('<iframe style="opacity:0;" width="400" height="300" src="'+source+'" frameborder="0" allowfullscreen="" ></iframe>')
    .children("iframe").delay(1300).animate({opacity:1},500)
    .parent().children(".close").delay(1800).css("display","block").animate({opacity:0.5},300);
    alert("open event");
  });

  $("#videopage .close").hover(function(){
    $(this).stop().animate({opacity:0.8},150);
  },function(){
    $(this).stop().animate({opacity:0.5},150);
  });

  $("#videopage .close").click(function(){
    alert("close event");
    $(this).animate({opacity:0},{duration:300,complete:function(){
      $(this).css("display","none");
      }
    });
  });
});

jsFiddle在这里

本质上，当您单击 div 时，视频会打开，一切都很好。“第一个”事件被触发。

问题是，当您单击关闭按钮并尝试触发“第二个”事件时，“第一个”事件也会被触发。

因此，当单击关闭按钮并触发带有选择器“#videopage .close”的 jquery 事件时，也会触发事件“#videopage .videoframe”。

这不应该。单击关闭按钮时触发的唯一事件是“#videopage .close”。

任何想法为什么？

4

1 回答 1

2

事件会冒泡，除非你阻止他们这样做。使用该stopPropagation方法防止点击事件冒泡到父级：

$("#videopage .close").click(function(e){
  e.stopPropagation();
  alert("close event");
  $(this).animate({opacity:0},{duration:300,complete:function(){
      $(this).css("display","none");
    }
  });
});
于 2013-09-18T19:57:58.593 回答