单击链接后试图防止鼠标移出答案

【问题标题】：trying to prevent mouseout after link is clicked单击链接后试图防止鼠标移出
【发布时间】：2017-06-29 00:33:11
【问题描述】：

我有一个带有鼠标悬停和鼠标悬停动画的导航。他们工作。我还有一个添加 CSS 类的点击监听器的声明。该类设置了 div 的高度，问题是 mouseout 也会改变这个 div。因此，我正在尝试找出一种方法来在单击链接时禁用 mouseout 侦听器。

我试图解开它，但没有运气

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 jquery html mouseout

【解决方案1】：

这能实现您的目标吗？无需担心单击事件的绑定，您可以在该单击事件中执行任何其他操作之前检查“选定”类。像下面这样...

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);

【讨论】：

谢谢，我什至没有考虑检查该课程。

【解决方案2】：

如果我对您的理解正确，您希望元素的高度在您单击它并将鼠标移离元素时保持相同的大小。您可以尝试使用

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。

【讨论】：