javascript - Jquery 动画在关闭时出现两次

Question

我有这些称为标签的 div，它们很小，然后当您单击它们时，它们会展开并显示其中的隐藏元素。 X (

X

) 也会显示。单击此 X 时，此标记(div)应关闭。

在 Firefox 中，该标签可以正常打开。然后关闭时它会关​​闭并重新打开。我不明白为什么收盘后接着开盘。

顺便说一句，我根本无法让前 3 行工作。

请记住，它在 Chrome 上运行良好。所以 Firefox 对 Jquery 的解释不同

HTML

    <div class="row row1">
      <div id="tag1" class="tag">
        <p class="p1">Header</p>
        <video id="VideoA1" class="VideoA" name="media">
          <source src="">
          <source src="" type="video/mp4">
          <source src="" type="video/mv4">
        </video>
        <p id="X"><span id="X" class="glyphicon glyphicon-remove" aria-label="Close"></span></p>
        <iframe id="player1" class="ytplayer" width="390" height="220" src="" frameborder="0" allowfullscreen></iframe>
        <p class="text">Random Text</p>
      </div>
   </div>

JQUERY

//This will make the tags expand to take up the whole row when clicked
   $(".row .tag").on('click', function(event1){

 if(event1.target.id == "tag1") {
   alert("hello");
   return; //Do nothing if the X is closed
 }
else {

$(this).siblings().hide();
$(this).animate({
  width:"98%",
});
$(".VideoA", this).css('display', 'none');
$("img", this).addClass('offleft');
$(".tag").hover(function(){
  $(this).css("cursor","default")
});
$(".glyphicon-remove", this).delay(1000).show();
$(".glyphicon-remove", this).parent().show();
$('iframe',this).show();
$('.text',this).show();
}
});


$(".row1 .glyphicon-remove").click(function(){

 var clicked = this;
 $(this).parent().hide();
 $(".row1 iframe").hide();
 $(".row1 .text").hide();
 $(this).parent().parent().animate({
   width: "400px",
 },function(){
  $(".row1 .VideoA").show();
  $("img", this).removeClass('offleft');
  $(".tag",this).css('cursor','pointer');
  $(clicked).parent().parent().siblings().show();
});
event.stopPropagation();
});


$(".row2 .glyphicon-remove").click(function(){
var clicked = this;
$(this).parent().hide();
$(".row2 iframe").hide();
$(".row2 .text").hide();
$(this).parent().parent().animate({
  width: "400px",
},function(){
  $(".row2 .VideoA").show();
  $("img", this).removeClass('offleft');
  $(".tag",this).css('cursor','pointer');
  $(clicked).parent().parent().siblings().show();
  });
  event.stopPropagation();
});

Answer 1

事件未定义。

将 event 注入(inject)为 $(".row2 .glyphicon-remove").click(function(event){。否则 stopPropagation 为没用。

我认为，Chrome 是严格的，在 undefined 上，它会停止对当前函数的评估，即当遇到 undefined 值时，它会抛出错误，并停止评估 JS那个特定的关闭。

但是，似乎 Firefox 会继续求值并将 click 冒泡到 DOM 树上。因此，在您的情况下，单击的事件需要由您的函数消耗，因此需要通过调用event.stopPropagation()来手动stopPropagation 并将 event 注入(inject)到您的闭包中，或者您也可以简单地在函数末尾return false，因为它是 jquery event object这与调用 event.preventDefault() 和 event.stopPropagation() 相同。

例如

    $(".row2 .glyphicon-remove").click(function(event){
    //stop propagation for the event but continue to evaluate current function
    event.stopPropagation(); 
      var clicked = this;
      $(this).parent().hide();
      $(".row2 iframe").hide();
      $(".row2 .text").hide();
      $(this).parent().parent().animate({
        width: "400px",
      },function(){
        $(".row2 .VideoA").show();
        $("img", this).removeClass('offleft');
        $(".tag",this).css('cursor','pointer');
        $(clicked).parent().parent().siblings().show();
      });
    return false; //jquery event stop propagation + prevent default    
    });