使用jQuery,在元素上设置Draggable可以防止在单击可拖动元素时触发模糊

Dan*_*nno 3 html javascript jquery jquery-ui javascript-events

使用jQuery,当您在文本框上设置模糊事件并将另一个元素设置为可拖动时,单击可拖动元素时,模糊事件不会在FireFox中触发.IE有点好,你得到模糊事件,但你没有得到可拖动元素上的click事件.

如果你没有在draggable构造函数中指定cancel:"",你将触发blur事件,但是你想要拖动的元素是不可拖动的.

jQuery v1.3.2 jQuery UI v1.7.2

console.log行适用于FireFox的FireBug插件.

<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>
Run Code Online (Sandbox Code Playgroud)

pri*_*bel 5

我有同样的问题.这是一个错误.有关解决方案,请参见此处:http://dev.jqueryui.com/ticket/4261