попытка предотвратить отключение мыши после нажатия на ссылку

У меня есть навигация с анимацией mouseover и mouseout. Они работают. У меня также есть оператор для прослушивателя кликов, который добавляет класс CSS. Класс устанавливает высоту div, проблема в том, что mouseout также изменяет этот div. Итак, я пытаюсь найти способ отключить прослушиватель мыши при нажатии на ссылку.

Я пытался отвязать его безуспешно

js

var currentDiv;

function slideMenu(e) {

if(e.type === "mouseover"){
    // console.log("mouseover");
    TweenMax.to($(this).find('div') , 0.25, {height:20});
}
else if(e.type === "mouseout"){
    // console.log("mouseout");
    TweenMax.to($(this).find('div') , 0.25, {height:1});
}
else if(e.type === "click"){
    console.log("click");

    if (currentDiv !== undefined){
        $(currentDiv).removeClass("selected");
    }

    currentDiv = $(this).find('div');
    $(currentDiv).addClass("selected");

    $(currentDiv).unbind('mouseout'); // not working



}
}

$(".menu a").click(slideMenu);
$(".menu a").mouseover(slideMenu);
$(".menu a").mouseout(slideMenu);

css

.selected{
    height: 20px;
}

javascript html jquery mouseout
person icekomo    schedule 28.06.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Достигнет ли это вашей цели? Вместо того, чтобы беспокоиться о привязке событий щелчка, вы можете просто проверить «выбранный» класс, прежде чем делать что-либо еще в этом событии щелчка. Как и следующее...

var currentDiv;

function slideMenu(e) {

    if(e.type === "mouseover"){
        // console.log("mouseover");

        var child_div = $(this).find("div")

        if (!$(child_div).hasClass("selected")) {
            TweenMax.to($(this).find('div') , 0.25, {height:20});
        } else {
            $(child_div).attr("style", "") // remove inline styles attr, so that height is based on css instead of JS
        }
    }
    else if(e.type === "mouseout"){
        // console.log("mouseout");

        var child_div = $(this).find("div")
        if (!$(child_div).hasClass("selected")) { // check to see if selected/clicked on
            TweenMax.to($(this).find('div') , 0.25, {height:1})
        } else {
            $(child_div).attr("style", "") // remove inline styles attr, so that height is based on css instead of JS
        }
    }
    else if(e.type === "click"){
        console.log("click", this);

        if (currentDiv !== undefined){
                $(currentDiv).removeClass("selected");
        }

        currentDiv = $(this).find('div');

        $(currentDiv).addClass("selected");
    }
}

$(".menu a").click(slideMenu);
$(".menu a").mouseover(slideMenu);
$(".menu a").mouseout(slideMenu);
person thislogancall    schedule 28.06.2017
comment
Спасибо, я даже не думал о проверке на этот класс. - person icekomo; 28.06.2017

arrow_upward
1
arrow_downward

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

var currentDiv;

// add a state
var hasBeenClicked = false;

function slideMenu(e) {

    if(e.type === "mouseover"){
        TweenMax.to($(this).find('div') , 0.25, {height:20});
    }
    else if(e.type === "mouseout"){

        // only resize if the element hasn't been clicked
        if (!hasBeenClicked) {

            TweenMax.to($(this).find('div') , 0.25, {height:1});

        }

    }
    else if(e.type === "click"){

        // assuming all this stuff is what you want and wasn't testing code
        if (currentDiv !== undefined){
            $(currentDiv).removeClass("selected");
        }
        currentDiv = $(this).find('div');
        $(currentDiv).addClass("selected");

        // set state to true
        hasBeenClicked = true;

    }

}

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

person Zbrezi    schedule 28.06.2017