如何在Javascript中将事件绑定视为逻辑?

问题描述 投票:0回答:1

我想只在另一个事件发生时创建一个事件绑定,首先,如果用户悬停一个元素,添加一个类以便显示其悬停状态,如果用户没有点击它内部,只需表现得像一个简单的:hover,如果用户单击工具提示内部,则不要使工具提示消失,但如果用户在第一次单击后单击工具提示外部,则使工具提示消失:

jQuery('.helper-tooltip').on('mouseenter', function() {
    let current_element = jQuery(this);
    current_element.addClass('open');
});

jQuery('.helper-tooltip').on('mouseleave', function() {
    let current_element = jQuery(this);
    current_element.removeClass('open');
});

jQuery('.tooltip-hidden-video-container').on('click', function() {
    this.innerHTML = '';
    jQuery('.helper-tooltip').off('mouseleave');

    jQuery('body').on('click', function(event) {
        //I'd like to go back on .helper-tooltip and remove the 'open' class if the user has clicked outside of it.
    });
});

但这是有趣的部分。如果我是,在我的第三个'on('click')选择任何可以轻易重复的事件,比如说,悬停mouseenter,它会执行逻辑,就像我徘徊它一样多次。

如何将这些事件绑定视为逻辑,以便我的代码按照我的要求工作?这甚至是件好事吗?

jquery event-binding
1个回答
0
投票

一种方法是将元素一旦被点击就将其置于一种状态,然后当它试图隐藏时,检查它是否处于该状态

一个简单的方法是使用这样的类:

jQuery('.helper-tooltip').on('mouseenter', function() {
    let current_element = jQuery(this);
    current_element.addClass('open');
});

jQuery('.helper-tooltip').on('mouseleave', function() {
    let current_element = jQuery(this);

    // Only remove class if element does NOT have the .clicked class
    if(!current_element.hasClass('clicked')){
        current_element.removeClass('open');
    }
});

jQuery('.tooltip-hidden-video-container').on('click', function() {
    this.innerHTML = '';
    let current_element = jQuery(this);
    current_element.addClass('clicked');

    jQuery('body').on('click', function(event) {
        current_element.removeClass('clicked').trigger('mouseleave');
        //I'd like to go back on .helper-tooltip and remove the 'open' class if the user has clicked outside of it.
    });
});
© www.soinside.com 2019 - 2024. All rights reserved.