鼠标输入时跨度闪烁

Question

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

Answer 1

基本上，当您将鼠标悬停在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/

Answer 2

您可以使用event.stopImmediatePropagation（）来防止反弹。

 $('.jqte_editor').on('mousedown', 'img', function(e) {
// your code
e.stopImmediatePropagation();
});