Question

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

如果你没有在draggable构造函数中指定取消：“”，你将触发模糊事件，但是你想要拖动的元素是不可拖动的。

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>

Answer 1

我遇到了同样的问题。这是一个错误。有关解决方案，请参阅此处：http://dev.jqueryui.com/ticket/4261

Answer 2

可拖动标签可能无法调焦。尝试为其添加tabindex属性。这样，当你点击它时，它将获得焦点（因此，模糊其他元素）。

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

2 个答案: