Как я могу трактовать мои привязки событий как логику в Javascript?

Question

Я хочу создать привязку к событию, только если произошло другое событие, во-первых, если пользователь наведет курсор на элемент, добавьте класс, чтобы отображалось его состояние наведения, если пользователь не щелкает внутри него, просто действуйте как простой :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, , оно выполняло бы логику столько раз, сколько я его удерживал.

Как я могу рассматривать эти привязки событий как логику, чтобы мой код работал согласно моим требованиям? Это даже хорошо?

Answer 1

Одним из способов является перевод элемента в состояние после нажатия на него, а затем при попытке скрыть, проверить, находится ли он в этом состоянии или нет

Простой способ - использовать такой класс:

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