Обработчики событий, конфликтующие друг с другом

Question

Я использую следующий код для перемещения вниз по меню вверх. Все идет хорошо, пока я не нажму кнопку снова, чтобы переместить меню вверх, тогда как оно снова и снова покачивается.

$(function() { 
 
    $('.login-btn, .lang-btn').on('click', function(event){ 
 
     var btn = $(this); 
 
     $(document).on({ 
 
      mousedown: function(e) { 
 
       btn.children('ul').slideUp(); 
 
      }, 
 
      scroll: function() { 
 
       btn.children('ul').slideUp(); 
 
      } 
 
     }); 
 
     btn.children('ul').slideToggle(); 
 
     event.stopPropagation(); 
 

 
    }); 
 
});

ul { 
 
    list-style:none; 
 
} 
 
.btn { 
 
    margin:0 20px 0 0; 
 
    background:#ddd; 
 
    padding:5px 10px; 
 
    border-radius:4px; 
 
    cursor:pointer; 
 
    float:left; 
 
    position:relative; 
 
} 
 
.btn ul{ 
 
    position:absolute; 
 
    top:100%; 
 
    width: 290px; 
 
    padding: 20px 30px; 
 
    display: none; 
 
    height: 370px; 
 
    overflow: hidden; 
 
    background:#666; 
 
    color:#fff 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="btn login-btn"> 
 
    Sign In 
 
    <ul> 
 
     <li>Some stuff here</li> 
 
    </ul> 
 
    </li> 
 
    <li class="btn lang-btn"> 
 
    English 
 
    <ul> 
 
     <li>English</li> 
 
     <li>French</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Есть ли что-то не так в моем коде ?!

Answer 1

Лучшее решение, чтобы сделать это, чтобы добавить окончание on и mousedown событие для остановки распространения:

$('.login-btn, .lang-btn').on('click', function(){ 
    var btn = $(this); 
    btn.children('ul').slideToggle(); 
    btn.siblings().children('ul').slideUp(); 

    $(document).on("mousedown scroll", function(e) { 
     btn.children('ul').slideUp(); 
    }); 
}).on('mousedown', function(e){ 
    e.stopPropagation(); 
}); 

Также благодаря @ DenysSéguret за его большую помощь.

Answer 2

Вы регистрируете обработчики событий на каждом клике и никогда не регистрируете их, поэтому во второй раз, когда вы открываете, у вас есть два обработчика событий, и оба они вызываются.

Вы можете отменить их, но есть более простой способ, чем зарегистрироваться и разрегистрировать: хранить открытую кнопку:

(function(){ 
    var btn = null; 
    $('.login-btn, .lang-btn').click(function(){ 
     if (btn) return; 
     btn = $(this); 
     btn.children('ul').slideDown(); 
     return false; 
    }); 
    $(document).on("click scroll", function(){ 
     if (!btn) return; 
     btn.children('ul').slideUp(); 
     btn = null; 
     return false; 
    }); 
})(); 

Side Примечание: вы можете заметить несколько упрощений:

• нет необходимости звоните stopPropagation и preventDefault, просто верните false
• Не нужно повторять обработчик события при привязке, просто укажите несколько типов событий при привязке

Answer 3

ваша проблема начинается здесь:

$(document).on({ 
    mousedown: function(e) { 
     btn.children('ul').slideUp(); 
    }, 
    scroll: function() { 
     btn.children('ul').slideUp(); 
    } 
}); 
btn.children('ul').slideToggle(); 

первым вы делаете slideUp, а затем slideToggle (что делать slideUp или slideDown зависит от ситуации элемента).

поэтому, чтобы исправить вашу проблему, удалите либо часть on, либо slideToggle! проверить это обновление на вашем фрагменте кода:

 $(document).on({ 
 
      mousedown: function(e) { 
 
       btn.children('ul').slideUp(); 
 
      }, 
 
      scroll: function() { 
 
       btn.children('ul').slideUp(); 
 
      } 
 
     }); 
 
    

ul { 
 
    list-style:none; 
 
} 
 
.btn { 
 
    margin:0 20px 0 0; 
 
    background:#ddd; 
 
    padding:5px 10px; 
 
    border-radius:4px; 
 
    cursor:pointer; 
 
    float:left; 
 
    position:relative; 
 
} 
 
.btn ul{ 
 
    position:absolute; 
 
    top:100%; 
 
    width: 290px; 
 
    padding: 20px 30px; 
 
    display: none; 
 
    height: 370px; 
 
    overflow: hidden; 
 
    background:#666; 
 
    color:#fff 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="btn login-btn"> 
 
    Sign In 
 
    <ul> 
 
     <li>Some stuff here</li> 
 
    </ul> 
 
    </li> 
 
    <li class="btn lang-btn"> 
 
    English 
 
    <ul> 
 
     <li>English</li> 
 
     <li>French</li> 
 
    </ul> 
 
    </li> 
 
</ul>