остановка отпускания мыши при нажатии на объект

Question

Если я хочу ввести мышью в div, элемент будет отображаться, затем, когда mouseleave, элемент исчезнет.

У меня есть функция щелчка внутри мыши, поэтому при нажатии появляется раскрывающееся меню.

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

Но я хочу, чтобы функция mouseleave работала, поэтому, если пользователь вводит указатель мыши в div, элемент будет отображаться, и они смогут щелкнуть по нему снова.

У меня сейчас есть что-то подобное, но я просто не знаю, как сделать так, чтобы отпуск мышью не применялся при нажатии

$(".div").mouseenter(function(){
    $(".element",this).show();
    $(".element").click(function(){
        $(".dropdown").show();
        return false;
    });
}).mouseleave(function(){
    $(".element",this).hide();
});

EDIT:

HTML

<div class='div'>
   <div class='element' style='display:none;'>
      boxed element
   </div>
   <div class='dropdown' style='display:none;'>
      menu
   </div>
</div>

Answer 1

Это помогло мне

$("#id").click(function(){
     $("#id").off("mouseleave");
});

Answer 2

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

т.е. что-то вроде:

$(".div").mouseenter(function(){
    $(".element",this).show();
    $(".element").click(function(){
        $(".dropdown").show();

        // set custom attribute for marking this one as clicked
        $(this).attr('clicked', 'yes'); 

        return false;
    });
}).mouseleave(function(){

    // check custom attribute before hiding the element
    if($(this).attr('clicked') != 'yes') {
        $(".element",this).hide();
    }

});

Answer 3

Похоже, что событие mouseleave, на которое вы ссылаетесь, запускается по клику jquery, а не по оригинальному mouseEvent.Попробуйте это:

$(".div").on('mouseenter', function(){
    $(".element").on('click', function(){ ...  });
});

$(".div").on('mouseleave', function(event){
    if(typeof(e.originalEvent) != 'undefined'){
      // only when mouseleave is the original event.
    }
});

Answer 4

use event.stopPropagation ();

это лучше, потому что вы можете использовать ссылки на элемент

$(".div").on('mouseenter', function(){
    showElm();
    $(".element").click(function(event){
        $(".div").off('mouseleave', hideElm);
        $(".dropdown").show();
        event.stopPropagation();
    });
});

$(".div").on('mouseleave', hideElm);
$(document).on('click', hideElm);

function hideElm(event) { $(".element, .dropdown").hide(); }
function showElm(event) { $(".element").show(); }

.element {position: absolute; top: 20px; height: 100px; width: 100px; display:none; background: red; }
.dropdown {position: absolute; top: 120px; height: 400px; width: 100px; background: blue; display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='div'>HERE
   <div class='element'>
      boxed element
   </div>
   <div class='dropdown'>
      menu
   </div>
</div>

Answer 5

Вы можете использовать новые методы включения / выключения jQuery, если вы используете 1.7 +

Что-то вроде:

$(".div").on('mouseenter', function(){
    showElm();
    $(".element").click(function(){
        $(".div").off('mouseleave', hideElm);
        $(".dropdown").show();
        return false;
    });
});

$(".div").on('mouseleave', hideElm);
$(document).on('click', hideElm);

function hideElm() { $(".element, .dropdown").hide(); }
function showElm() { $(".element").show(); }

Fiddle: http://jsfiddle.net/fSjtm/

Вероятнонужно немного подправить, но это даст вам общее представление.