如何解决mouseenter/mouseleave问题

Question

如何解决mouseenter/mouseleave问题

5

我需要帮助解决一些mouseenter/mouseleave的问题。下面是一个视觉原理图： Schematic

这是一个垂直按钮滑块。当你点击任何一个按钮时，一个“lightbox” div弹出并覆盖在滑块容器上方。如果再次点击lightbox div，则关闭并返回默认状态。问题在于按钮的mouseenter/mouseleave事件会干扰导致一些问题。

以下是jQuery代码：

function rocksType_mouseEvents_run(){

    // Mouseenter events
    $('.rocksType_DBitems_container').on('mouseenter', '> div:not(.rocksType_highlighted)', function(){
      $(this).stop().animate({'width':'116px', 'height':'109px', 'left':'0%', 'right':'4%', 'margin-top':'1.2%', 'margin-bottom':'1.2%'}, 300, 'swing')
      .find('p', this).stop().animate({'font-size':'110%', 'color':'rgba(0, 0, 0, 1)'}, 100, 'swing');
    });

    // Mouseleave events
    $('.rocksType_DBitems_container').on('mouseleave', '> div:not(.rocksType_highlighted)', function(){
      $(this).stop().animate({'width':'106px', 'height':'99px', 'left':'4%', 'right':'4%', 'margin-top':'5.2%', 'margin-bottom':'5.1%'}, 300, 'swing')
      .find('p', this).stop().animate({'font-size':'100%', 'color':'rgba(0, 0, 0, 0.5)'}, 100, 'swing');
    });

    // Click events
    $('.rocksType_DBitems_container').on('click', '> div:not(.rocksType_highlighted)', function(){

      // De-highlight currently rocksType_highlighted item
      function dehighlight_clickedRocksType(){
        $('.rocksType_DBitems_container > div.rocksType_highlighted').removeClass('rocksType_highlighted').stop().animate({'width':'106px', 'height':'99px', 'left':'4%', 'right':'4%', 'margin-top':'5.2%', 'margin-bottom':'5.2%'}, 300, 'swing')
        .find('p').stop().animate({'font-size':'73%'}, 150, 'swing',
          function(){
            $(this).stop().animate({'width':'100px', 'height':'93px', 'left':'5%', 'right':'5%', 'margin-top':'7.6%', 'margin-bottom':'7.6%', 'opacity':'0.3'}, 300, 'swing')
            .find('p').stop().animate({'font-size':'100%', 'color':'rgba(0, 0, 0, 1)'}, 150, 'swing');
          }
        );
      }

      // De-highlight currently rocksType_highlighted item
      dehighlight_clickedRocksType();

      // Highlight clicked item
      $(this).addClass('rocksType_highlighted').stop().animate({'width':'100px', 'height':'93px', 'left':'5%', 'right':'5%', 'margin-top':'7.6%', 'margin-bottom':'7.6%'}, 300, 'swing')
      .find('p').stop().animate({'font-size':'73%'}, 300, 'swing',
        function(){
          $(this).stop().animate({'font-size':'110%', 'color':'rgba(255, 255, 255, 0.5)'}, 300, 'swing')
          .parent().stop().animate({'width':'116px', 'height':'109px', 'left':'0%', 'right':'4%', 'margin-top':'1.3%', 'margin-bottom':'1.3%', 'opacity':'1'}, 300, 'swing',
            function(){
              $('.rocksType_DBitem_lightbox').fadeIn(1000);
              $('.rocksType_lightboxBackground').fadeIn(1000);
              $('.rocksType_DBitem_lightbox').one('click', function(){
                $(this).fadeOut(300);
                $('.rocksType_lightboxBackground').fadeOut(300);
                // De-highlight currently rocksType_highlighted item
                dehighlight_clickedRocksType();
              });
            }
          );
        }
      );

    });

  }

  rocksType_mouseEvents_run();

...和一个FIDDLE。

谢谢。

Pedro

- Pedro

在你的事件处理程序中添加 event.stopPropagation()。 - sferret

这样按钮只会触发一次mouseenter/mouseleave... - Pedro

使用 .off() 来切换鼠标事件，配合一些状态变量。 - sferret

我可以在那里使用一些帮助。 - Pedro

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sferret · Answer 1

创建了一个 JSFiddle http://jsfiddle.net/crEHc/1/。将灯箱的 div 移到容器外面，发现了一个拼写错误，应该是 on("click" 而不是 one("click"。

$('.rocksType_DBitem_lightbox').one('click', function(){