javascript - Span 在 mouseenter 上闪烁

Question

我在这里创建了一个 jsfiddle http://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);
    });

Answer 1

基本上，当您将鼠标悬停在跨度上时，您将离开导致跨度被删除的图像。当跨度被移除时，您再次进入图像，导致添加跨度，这再次导致图像被留下，再次隐藏跨度在无限循环中导致闪烁。

要解决此问题，您首先需要创建一个 throttle ，它只会在保留图像且未在 10 毫秒内输入跨度时移除跨度。为此，创建一个全局变量，然后在图像离开时，在其中存储一个 setTimeout 以删除跨度。现在，在 span enter 上，清除超时。

var resizeEnterTimer;
...
    .on('mouseleave', 'img', function() {
        resizeEnterTimer = setTimeout(function(){
            $("#spanresize").remove();
            $("#imagecontainer> img").unwrap();
        },10);
    })
    .on('mouseenter', 'span', function () {
        clearTimeout(resizeEnterTimer);
    })

这修复了闪烁，但是现在您遇到了添加多个跨度的问题，因为当您离开跨度时会触发图像输入事件。

要解决这个问题，只需删除 span 并在鼠标输入图像时展开图像。

.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/