<tfoot id='vVfb8'></tfoot>

  • <i id='vVfb8'><tr id='vVfb8'><dt id='vVfb8'><q id='vVfb8'><span id='vVfb8'><b id='vVfb8'><form id='vVfb8'><ins id='vVfb8'></ins><ul id='vVfb8'></ul><sub id='vVfb8'></sub></form><legend id='vVfb8'></legend><bdo id='vVfb8'><pre id='vVfb8'><center id='vVfb8'></center></pre></bdo></b><th id='vVfb8'></th></span></q></dt></tr></i><div id='vVfb8'><tfoot id='vVfb8'></tfoot><dl id='vVfb8'><fieldset id='vVfb8'></fieldset></dl></div>
    <legend id='vVfb8'><style id='vVfb8'><dir id='vVfb8'><q id='vVfb8'></q></dir></style></legend>

    1. <small id='vVfb8'></small><noframes id='vVfb8'>

      • <bdo id='vVfb8'></bdo><ul id='vVfb8'></ul>

        如何删除鼠标离开的下一个附加?

        时间:2023-10-20
        <i id='sfTP5'><tr id='sfTP5'><dt id='sfTP5'><q id='sfTP5'><span id='sfTP5'><b id='sfTP5'><form id='sfTP5'><ins id='sfTP5'></ins><ul id='sfTP5'></ul><sub id='sfTP5'></sub></form><legend id='sfTP5'></legend><bdo id='sfTP5'><pre id='sfTP5'><center id='sfTP5'></center></pre></bdo></b><th id='sfTP5'></th></span></q></dt></tr></i><div id='sfTP5'><tfoot id='sfTP5'></tfoot><dl id='sfTP5'><fieldset id='sfTP5'></fieldset></dl></div>

              <tbody id='sfTP5'></tbody>

            <legend id='sfTP5'><style id='sfTP5'><dir id='sfTP5'><q id='sfTP5'></q></dir></style></legend>

            1. <tfoot id='sfTP5'></tfoot>
                <bdo id='sfTP5'></bdo><ul id='sfTP5'></ul>
                • <small id='sfTP5'></small><noframes id='sfTP5'>

                  本文介绍了如何删除鼠标离开的下一个附加?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  我的代码有问题;当我 mouseenter 一个元素时,工具栏被附加到这个元素,但是当我 mouseleave 从工具栏到元素时,工具栏又被附加了.我怎样才能防止这种重新附加?

                  I have a problem with my code; when I mouseenter an element, a toolbar is appended to this element, but when I mouseleave from the toolbar to the element, the toolbar is appended again. How can I prevent this re-appending?

                  $('.el').on('mouseenter', function(e){
                  
                    var toolbar = $('<div class="toolbar"><span>leave toolbar to element</span></div>');  
                  
                      setTimeout(function(){
                          toolbar.addClass('widget-over');
                      },100);
                  
                      $('body').prepend(toolbar);
                  
                      toolbar.css({
                          left:$('.el').offset().left,
                          top:$('.el').offset().top - toolbar.height() - 20
                      });
                  
                      $('.el').on('mouseleave',function(e){
                          if ($(e.relatedTarget).closest(toolbar).length) return;
                          toolbar.removeClass('widget-over');
                          toolbar.remove();
                      });
                  
                      toolbar.on('mouseleave',function(e){
                          toolbar.remove();
                      });
                  });
                  

                  非常感谢社区的解答!正是 Jeremy Thille, Arun P Johny 和 Jivings

                  Big thanks to community for answers! exactly Jeremy Thille, Arun P Johny and Jivings

                  1. 问题小提琴 -> 小提琴
                  2. 解决方案小提琴 -> 小提琴

                  推荐答案

                  问题在于,每次有 mouseover 时,您都在创建事件处理程序.我已经将它们分开以使其更简单,这似乎已经修复了您的错误:

                  The trouble was that you were creating your event handlers each time there was a mouseover. I've split them up to make it simpler, and that seems to have fixed your bug:

                  var toolbar = $('<div class="toolbar"><span>leave toolbar to element</span></div>');  
                  toolbar.on('mouseleave',function(e){
                      toolbar.remove();
                  });    
                  
                  var enter = function(e) {
                  
                      setTimeout(function(){
                          toolbar.addClass('widget-over');
                      },100);
                  
                      $('body').prepend(toolbar);
                  
                      toolbar.css({
                          left: $el.offset().left,
                          top: $el.offset().top - toolbar.height() - 20
                      });    
                  };
                  
                  var leave = function(e){
                      if ($(e.relatedTarget).closest(toolbar).length) return;
                      toolbar.removeClass('widget-over');
                      toolbar.remove();
                  }
                  
                  var $el = $('.el')
                      .on('mouseenter', enter)
                      .on('mouseleave', leave);
                  

                  JSfiddle:http://jsfiddle.net/3r8wrumL/2/

                  这篇关于如何删除鼠标离开的下一个附加?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:带有href和javascript的jQuery附加元素不起作用 下一篇:如何打造“大"JavaScript(JQuery)中的div结构?

                  相关文章

                    <bdo id='mNq9N'></bdo><ul id='mNq9N'></ul>

                    <tfoot id='mNq9N'></tfoot>
                    1. <i id='mNq9N'><tr id='mNq9N'><dt id='mNq9N'><q id='mNq9N'><span id='mNq9N'><b id='mNq9N'><form id='mNq9N'><ins id='mNq9N'></ins><ul id='mNq9N'></ul><sub id='mNq9N'></sub></form><legend id='mNq9N'></legend><bdo id='mNq9N'><pre id='mNq9N'><center id='mNq9N'></center></pre></bdo></b><th id='mNq9N'></th></span></q></dt></tr></i><div id='mNq9N'><tfoot id='mNq9N'></tfoot><dl id='mNq9N'><fieldset id='mNq9N'></fieldset></dl></div>

                    2. <legend id='mNq9N'><style id='mNq9N'><dir id='mNq9N'><q id='mNq9N'></q></dir></style></legend>

                      <small id='mNq9N'></small><noframes id='mNq9N'>