我想只在另一个事件发生时创建一个事件绑定,首先,如果用户悬停一个元素,添加一个类以便显示其悬停状态,如果用户没有点击它内部,只需表现得像一个简单的: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('.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.
});
});