使用jQuery，在元素上設置Draggable可以防止在單擊可拖動元素時觸發模糊

使用jQuery，當您在文本框上設置模糊事件並將其他元素設置爲可拖動時，單擊可拖動元素時，模糊事件不會在FireFox中觸發。 IE瀏覽器稍微好一些，你會看到模糊事件，但你沒有在可拖動元素上看到點擊事件。使用jQuery，在元素上設置Draggable可以防止在單擊可拖動元素時觸發模糊

如果您沒有在可拖動的構造函數中指定cancel：「」，則會觸發blur事件，但是您要拖動的元素不可拖動。

jQuery的V1.3.2 jQuery UI的V1.7.2

的執行console.log行是FireFox的插件螢火。

<HTML> 
    <HEAD> 
     <TITLE>Blur/Click Workbench</TITLE> 
     <script src="js/jquery.js" type="text/javascript" ></script> 
     <script src="js/ui/ui.core.js" type="text/javascript"></script> 
     <script src="js/ui/ui.draggable.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
function blurring() { 
    console.log('1 - blurring - ' + $(this).attr('id')); 
} 

function clicking() { 
    console.log('2 - clicking - ' + $(this).attr('id')); 
} 

$(document).ready(function() { 
    $(".draggableTool").draggable({ cancel: "" }); 

    $('.property').blur(blurring); 
    $('#labelContainer').click(clicking); 
}); 
     </script> 
    </HEAD> 
    <BODY> 
     <input type='text' class='property' id='tb1' /> 
     <br /> 
     <input type='text' class='property' id='tb2' /> 
     <br /> 
     <label class='draggableTool' id='labelContainer' style='height:20px;position:absolute;'> 
      <textarea id='taLabel' style='height:100%;background-color:white;border:1px solid grey;'>Label</textarea> 
     </label> 
    </BODY> 
</HTML>

來源

2009-11-12 Danno

我發現IE 7正如預期的那樣工作。 – Danno 2009-11-12 20:15:31

我有同樣的問題。這是一個錯誤。有關解決方案，請參閱此處：http://dev.jqueryui.com/ticket/4261

來源

2010-10-30 14:32:06 prinzdezibel

可能是可拖動標籤不可聚焦。嘗試添加一個tabindex屬性。這樣，當你點擊它時，它會獲得焦點（並因此模糊其他元素）。

來源

2009-11-12 19:37:04 JasonWyatt

我試過了，但沒有奏效。標籤標籤沒有tabIndex屬性。 – Danno 2009-11-12 20:14:22

使用jQuery，在元素上設置Draggable可以防止在單擊可拖動元素時觸發模糊

回答

相關問題