stopPropagation 不适用于可拖动的 resizble div
Posted
技术标签:
【中文标题】stopPropagation 不适用于可拖动的 resizble div【英文标题】：stopPropagation not working on draggable resizble div 【发布时间】：2013-06-28 13:46:45 【问题描述】：我有一个可拖动和调整大小的 div。
双击时，我想使用 stopPropagation 使 div 的内容可选择。
但由于某种原因，stopPropagation 不起作用。
任何人都可以看看我的代码，看看我哪里出错了吗？
这是一个 jsfiddle
http://jsfiddle.net/j6FLa/16/
和代码
<html>
<HEAD>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src= "http://js.nicedit.com/nicEdit-latest.js"></script>
<style>
.dragbox
position:absolute;
width:10px;
height:25px;
padding: 0.0em;
margin:25px;
cursor:move;
z-index:2
</style>
</HEAD>
<BODY>
<script>
//<![CDATA[
bkLib.onDomLoaded(function ()
var myNicEditor = new nicEditor();
myNicEditor.setPanel('myNicPanel');
myNicEditor.addInstance('draggable');
);
//]]>
$("div.dragbox").dblclick(function (e)
$('.dragbox').css('cursor','select');
e.stopPropagation();
);
$(function ()
$("#draggable").draggable().resizable();
);
</script>
<div id="myNicPanel" style="width: 525px;"></div>
<div id="draggable" class="dragbox" style="width:300px;height:300px;background-color:#ff0000;padding:25px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor</div>
</BODY>
</HTML>
【问题讨论】：
我的 inblox 说我有 3 个关于这个问题的 cmets，但他们没有显示在页面上......有什么想法吗？ 【参考方案1】：可能是一种解决方法：
DEMO
$("div.dragbox").dblclick(function (e)
$('.dragbox').css('cursor','select');
$(this).draggable( 'disable' ).removeClass('ui-state-disabled').focus();
).on('blur',function()
$(this).draggable( 'enable' );
);
或者更好：
DEMO
$("div.dragbox").dblclick(function (e)
if(!$(this).data('editing'))
$('.dragbox').css('cursor','select');
$(this).draggable( 'disable' ).removeClass('ui-state-disabled').focus();
$(this).data('editing',true);
else
$(this).data('editing',false);
$(this).draggable( 'enable' )
);
【讨论】：
这似乎在小提琴上工作我会在我的网络服务器上试试......干杯 你清除缓存了吗，没有理由它在 jsfiddle 中有效，但在你的服务器上无效 是的，我也尝试过所有我今天还没用过的浏览器 提供一个在线测试的链接，我认为你做错了 您需要使用 DOM 就绪处理程序包装 sn-p：$(function()...); 然后它才能工作以上是关于stopPropagation 不适用于可拖动的 resizble div的主要内容，如果未能解决你的问题，请参考以下文章