鼠標中心的量程閃爍

我在這裏創建了一個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); 
    });

來源

2013-07-12 Spirals Whirls

鏈接到的jsfiddle是不夠的，必須包括再現你的問題你的問題的代碼。 –

我已經制作了我自己的示例，展示瞭如何正確地停止傳播：http://jsfiddle.net/5szHw/ –

我已經收錄了帶有問題的代碼。我知道那是怎麼回事。我在那裏做過類似的事情。但這不起作用 –

基本上，當您將鼠標懸停在範圍上時，您將留下導致範圍被刪除的圖像。當跨度被移除時，您再次輸入圖像，導致跨度被添加，這又導致圖像被留下，再次在導致閃爍的無限循環中隱藏跨度。

爲了解決這個問題，您首先需要創建一個油門，如果圖像剩下並且跨度在10 ms內未輸入，則該油門將僅移除該範圍。爲此，創建一個全局變量，然後在圖像離開時，在其中存儲一個setTimeout，以刪除該跨度。現在，在跨度輸入時，清除超時。

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/

來源

2013-07-12 18:38:20

我必須再說一次..一個甜蜜的解決方案..我會花這個再花費一個小時.. :) –

+1不錯的工作，凱文。 – Praveen

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

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

e.stopImmediatePropagation(); 
});

來源

2013-07-12 18:14:41 Praveen

實際上'span'出現在圖像上方以顯示'resize'選項。所以我不得不在形象上做到這一點。就像我在修改文字大小來選擇它並看到調整大小窗口一樣。（'mouseenter'，'span'，function（e）{（e.stopImmediatePropagation（）; }）; $（'.jqte_editor'）。 ' –

http://jsfiddle.net/xfc7H/1/ –

@螺旋女孩最好有隱藏/表演技巧。 – Praveen

鼠標中心的量程閃爍

回答

相關問題