在jQuery或Javascript中切换事件捕获？

Posted 2021-05-03

我的页面上有元素（id=itemid），当盘旋时会导致另一个元素（id=panel）变得可见（通过fadeIn）。基本上itemid上的悬停事件导致面板fadeIn和mouseOut导致fadeOut。

我想制作一个按钮，以便在单击时面板元素不会出现fadeIn或者保持可见状态。单击该按钮时，mouseIn和mouseOut事件应该再次起作用。

有任何想法吗？

谢谢！

$(document).ready(function(){
    $('.itemid').hover(
        function () {
            $('.panel').fadeIn(300);
        },
        function () {
            $('.panel').fadeOut(200);
        }
    );
});

答案

设置是否进行淡化的标志：

$(document).ready(function(){
var fadeEnabled = true;
$('.itemid').hover(
    function () {
        if (fadeEnabled) {
            $('.panel').fadeIn(300);
        }
    },
    function () {
        if (fadeEnabled) {
            $('.panel').fadeOut(200);
        }
    }
);

$("#myButton").click(function() {
     fadeEnabled = !fadeEnabled;
});

});

然后，只需用您的按钮切换该标志，它将启用或禁用淡入淡出行为。

另一答案

单击该按钮，在对象/项目上使用$（selector）.unbind（'mousein'）取消注册事件，并在另一次单击按钮时重新注册。每次点击按钮都要保持切换。