使用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可以防止在单击可拖动元素时触发模糊

回答

相关问题