Using jQuery, setting Draggable on an element prevents blur from firing when you click the draggable element
Using jQuery, when you set a bl开发者_Go百科ur event on a text box and set another element as draggable, when you click the draggable element, the blur event does not fire in FireFox. IE is a little better, you get the blur event but you don't get the click event on the draggable element.
If you don't specify the cancel: "" in the draggable constructor, you will get the blur event to fire, but then the element you want to drag is not draggable.
jQuery v1.3.2 jQuery UI v1.7.2
The console.log lines are for FireFox's FireBug plugin.
<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>
I had the same problem. It's a bug. For a solution see here: http://dev.jqueryui.com/ticket/4261
It could be that the draggable label isn't focusable. Try adding a tabindex attribute to it. This way when you click on it, it'll gain focus (and hence, blur the other elements).
加载中,请稍侯......
精彩评论