单击 link 后尝试防止鼠标移出

Question

我有一个带有鼠标悬停和鼠标移开动画的导航。他们工作。我还有一个添加 CSS class 的点击侦听器声明。 class 设置 div 的高度，问题是 mouseout 也会改变这个 div。所以我想找出一种方法来在单击 link 时禁用 mouseout 侦听器。

我尝试解绑，但没有成功

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

Answer 1

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

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。

Answer 2

这会实现您的目标吗？您不必担心点击事件的绑定，您可以在点击事件中执行任何其他操作之前检查 "selected" class。像下面这样...

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

单击 link 后尝试防止鼠标移出

trying to prevent mouseout after link is clicked

html

javascript

jquery

mouseout