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

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

要解决此问题，您首先需要创建一个节流阀，只有在图像保留并且未在10毫秒内输入范围时才会移除范围。为此，创建一个全局变量，然后在图像离开时，在其中存储一个删除跨度的setTimeout。现在，在span输入时，清除超时。

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

这可以解决闪烁现象，但是现在您遇到了多个跨距的问题，因为当你离开跨度时会触发图像输入事件。

要解决此问题，只需删除范围并在图像的鼠标中心打开图像。

.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();
});

跨度在mouseenter上闪烁

2 个答案: