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

如何将事件绑定视为Javascript中的逻辑？

1 个答案: