鼠标输入时跨度闪烁
Span is flickering on mouseenter
我在这里创建了一个jsfiddlehttp://jsfiddle.net/xfc7H/.当我将鼠标悬停在文本resize
上时,它会闪烁。这意味着事件正在传播。我希望当我悬停在文本上时,它看起来稳定。如果有人能解决这个问题,请。
html
<div class="jqte_editor" >
<img width=100px height=100px stye=" border:1px solid #eee;" src='http://appendto.com/wp-content/uploads/2013/04/training-hero.jpg'></img>
</div>
jquery
$('.jqte_editor').on('mousedown', 'span', function() {
$("#imagecontainer").has(this).prepend("<div style='font-size:10px; position:absolute; background-color:#eee; opacity:1; width:70px; top:" + $(this).position().top + "; left:" + $(this).position().left + ";' id='imageresizer'>Width:<input type='text' style='width:25px; opacity:1.0;' id='imagewidth'></input><br> height:<input type='text' id='imageheight' style='width:25px'></input></div>");
return false;
});
$('.jqte_editor').on('mouseenter', 'span', function(e) {
e.stopPropagation();
});
$('.jqte_editor').on('mouseenter', 'img', function() {
$(this).wrap("<div id='imagecontainer' style='float:left; position:relative;'></div>");
$("#imagecontainer").prepend("<span style='position:absolute; top:0px; left:0px; background-color:#eee; color:#888;' id='spanresize'>resize</span>");
});
$('.jqte_editor').on('mouseleave', 'img', function() {
$("#spanresize").remove();
$("#imagecontainer> img").unwrap();
});
$('.jqte_editor').on('mousedown', 'img', function() { $("#spanresizer").remove(); $("#imageresizer").remove(); $("#imagecontainer> img").unwrap(); });
$('.jqte_editor').on('keyup', 'input', function() {
var imagelement = $("#imagecontainer").find('img');
console.log(imagelement);
var width = $("#imagewidth").val();
var height = $("#imageheight").val();
console.log(width);
imagelement.attr("width", width);
imagelement.attr("height", height);
});
基本上,当您将鼠标悬停在span上时,您会留下导致span被删除的图像。删除跨度后,您将再次输入图像,从而添加跨度,从而再次留下图像,再次将跨度隐藏在无限循环中,从而导致闪烁。
要解决此问题,您首先需要创建一个节流阀,该节流阀仅在图像保留且未在10毫秒内输入跨度的情况下删除跨度。要做到这一点,请创建一个全局变量,然后在图像保留时,在其中存储一个setTimeout,以删除跨度。现在,在span输入时,清除超时。
var resizeEnterTimer;
...
.on('mouseleave', 'img', function() {
resizeEnterTimer = setTimeout(function(){
$("#spanresize").remove();
$("#imagecontainer> img").unwrap();
},10);
})
.on('mouseenter', 'span', function () {
clearTimeout(resizeEnterTimer);
})
这修复了闪烁的问题,但现在由于离开跨度时触发图像输入事件,您会遇到添加多个跨度的问题。
要解决这个问题,只需移除跨度并在图像的mouseenter上打开图像。
.on('mouseenter', 'img', function () {
$("#spanresize").remove();
$("#imagecontainer> img").unwrap();
$(this).wrap("<div id='imagecontainer' style='float:left; position:relative;'></div>");
$("#imagecontainer").prepend("<span style='position:absolute; top:0px; left:0px; background-color:#eee; color:#888;' id='spanresize'>resize</span>");
})
http://jsfiddle.net/xfc7H/5/
您可以使用event.stopImmediatePropagation()来防止反弹。
$('.jqte_editor').on('mousedown', 'img', function(e) {
// your code
e.stopImmediatePropagation();
});
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 可以't让我的if语句处理js中的html表单输入
- 名称输入的索引
- 如何编写HTML输入的JS内联
- 要求输入在数据列表中
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 如何将输入(type=text)从html表单传递到javascript函数
- 单击jquery清除输入值
- 而循环只设置php中输入字段中的第一个值
- 在输入字段中将最小金额设置为
- jQuery-鼠标输入闪烁图像
- 调用 blur() 时,IE 中文本区域和输入中的光标闪烁
- 在表单输入中键入.js闪烁光标时遇到问题
- 鼠标输入/鼠标离开产生闪烁效果
- 可编辑 - 输入字段上的最大长度,模糊时闪烁
- 如何修复使用我们的默认值/占位符插件的输入字段时的闪烁效果
- 鼠标输入时跨度闪烁
- 单击按钮可打开带有闪烁光标的输入字段
- 隐藏插入符号-插入点-输入栏-闪烁的垂直小栏