1

I have created a jsfiddle here http://jsfiddle.net/xfc7H/. here when I hover the mouse on the text resize it flickers. So that means the event is being propagated. I want this text to appear stable when I hover on it. Please if someone can resolve the issue.

the 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>

the 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);
    });
4

2 回答 2

2

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

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

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/

于 2013-07-12T18:38:20.947 回答
0

您可以使用event.stopImmediatePropagation()来防止反弹。

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

e.stopImmediatePropagation();
});
于 2013-07-12T18:14:41.923 回答