鼠标离开防止默认问题
Mouseleave preventDefault issue
我试图在某些情况下阻止默认鼠标悬停但没有成功。这个想法是 mouseover/mouseleave 上禁用输入旁边的 show/hide 图标,并将其保持在输入启用状态,它工作正常。我无法做的是在模糊时隐藏图标。
HTML
<!-- Element -->
<div class="ui padded grid element">
<div class="column">
<a href="#"><i class="trash icon" style="display: none;"></i></a>
</div>
<div class="column page-element-page">
<div class="ui disabled transparent input">
<input value="Input 1" type="text" />
</div>
</div>
</div>
<!-- Element -->
<div class="ui padded grid element">
<div class="column">
<a href="#"><i class="trash icon" style="display: none;"></i></a>
</div>
<div class="column page-element-page">
<div class="ui disabled transparent input">
<input value="Input 2" type="text" />
</div>
</div>
</div>
JS
// Get input on dblClick
$(".disabled.transparent").dblclick(function () {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active').focus();
});
// Disabled input on blur
$('.ui.input').on('blur', '.active', function () {
$('.ui.input').addClass('disabled transparent');
});
// Show trash icon on hover
$('.element').mouseover(function() {
$(this).find('.trash').css('display', 'block');
})
// Would like to keep trash icon on input focus and hide icon on blur
$('.element').mouseleave(function(event) {
if($(this).find('input').is(":focus")) {
event.preventDefault();
} else {
$(this).find('.trash').hide();
}
});
这是一个fiddle
感谢帮助
只需在 CSS 中修复它,首先向 .element 添加一个活动的 class。总是更好地使用 CSS
$(".disabled.transparent").dblclick(function () {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active').focus();
$(this).closest('.element').addClass('active');
});
/* Disable input on blur page name */
$('.ui.input').on('blur', '.active', function () {
$('.ui.input').addClass('disabled transparent');
$(this).closest('.element').removeClass('active');
});
并在 CSS
.page-element .trash,
.page-element .setting {
display: none;
}
.page-element:hover .trash,
.page-element:hover .setting {
display: block;
}
.page-element.active .trash,
.page-element.active .setting {
display: block !important
}
我试图在某些情况下阻止默认鼠标悬停但没有成功。这个想法是 mouseover/mouseleave 上禁用输入旁边的 show/hide 图标,并将其保持在输入启用状态,它工作正常。我无法做的是在模糊时隐藏图标。
HTML
<!-- Element -->
<div class="ui padded grid element">
<div class="column">
<a href="#"><i class="trash icon" style="display: none;"></i></a>
</div>
<div class="column page-element-page">
<div class="ui disabled transparent input">
<input value="Input 1" type="text" />
</div>
</div>
</div>
<!-- Element -->
<div class="ui padded grid element">
<div class="column">
<a href="#"><i class="trash icon" style="display: none;"></i></a>
</div>
<div class="column page-element-page">
<div class="ui disabled transparent input">
<input value="Input 2" type="text" />
</div>
</div>
</div>
JS
// Get input on dblClick
$(".disabled.transparent").dblclick(function () {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active').focus();
});
// Disabled input on blur
$('.ui.input').on('blur', '.active', function () {
$('.ui.input').addClass('disabled transparent');
});
// Show trash icon on hover
$('.element').mouseover(function() {
$(this).find('.trash').css('display', 'block');
})
// Would like to keep trash icon on input focus and hide icon on blur
$('.element').mouseleave(function(event) {
if($(this).find('input').is(":focus")) {
event.preventDefault();
} else {
$(this).find('.trash').hide();
}
});
这是一个fiddle
感谢帮助
只需在 CSS 中修复它,首先向 .element 添加一个活动的 class。总是更好地使用 CSS
$(".disabled.transparent").dblclick(function () {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active').focus();
$(this).closest('.element').addClass('active');
});
/* Disable input on blur page name */
$('.ui.input').on('blur', '.active', function () {
$('.ui.input').addClass('disabled transparent');
$(this).closest('.element').removeClass('active');
});
并在 CSS
.page-element .trash,
.page-element .setting {
display: none;
}
.page-element:hover .trash,
.page-element:hover .setting {
display: block;
}
.page-element.active .trash,
.page-element.active .setting {
display: block !important
}