使用jQuery防止元素“捕获”鼠标?
Posted
技术标签:
【中文标题】使用jQuery防止元素“捕获”鼠标?【英文标题】:Prevent an element from "capturing" the mouse using jQuery? 【发布时间】:2010-09-15 14:37:37 【问题描述】:我正在尝试调整嵌入对象的大小。问题在于,当鼠标悬停在对象上时,它会“控制”鼠标,吞噬移动事件。结果是您可以扩展包含对象的 div,但是当您尝试缩小它时,如果鼠标进入对象的区域,则调整大小会停止。
目前,我在移动时隐藏对象。我想知道是否有办法阻止对象捕获鼠标。也许在其上覆盖另一个元素以防止鼠标事件到达嵌入的对象?
在调整大小时使用重影不适用于嵌入对象,顺便说一句。
添加赏金,因为我似乎永远无法完成这项工作。要收集,只需执行以下操作:
提供一个嵌入了 PDF 的网页,以页面为中心。 pdf不能占满整个页面;使其宽度/高度为浏览器窗口宽度的 50% 之类的。
使用 jQuery 1.2.6 为 pdf 的每一边和角落添加调整大小。
缩小 PDF 时,PDF 不得捕捉鼠标并停止拖动。也就是说当我点击pdf的边缘并拖动时,当鼠标进入pdf的显示框时,resize操作继续进行。
这必须在 IE 7 中工作。条件 CSS(如果 gte ie7 或其他)hack 很好。
嗯...我认为这可能是 iframe 的问题...
<div style="text-align:center; padding-top:50px;">
<div id="doc" style="width:384px;height:512px;">
<iframe id="docFrame" style="width: 100%; height: 100%;"
src='http://www.ready.gov/america/_downloads/sampleplan.pdf'>
</iframe></div></div>
<div id="data"></div>
<script type="text/javascript">
$(document).ready(function()
var obj = $('#docFrame');
$('#doc').resizable(handles:'all', resize: function(e, ui)
$('#data').html(ui.size.width + 'x' + ui.size.height);
obj.attr(width: ui.size.width, height: ui.size.height);
);
);
</script>
这不起作用。当您的鼠标误入 iframe 时,调整大小操作将停止。
有一些很好的答案;如果赏金在我可以开始审查之前用完,我将恢复赏金(相同的 150 分)。
【问题讨论】:
嵌入对象如闪光或冲击波? 它是 xps 文档查看器。我过去在使用 Adobe 的 PDF 查看器时也遇到过同样的问题。 嘿,您能展示一下生成您所说的嵌入式 pdf 的代码吗?我会试试看的。 老兄,来吧。我放弃这一点。谷歌一下。 我有。在我的一生中,我在页面上找不到该死的 xps 文档查看器。 【参考方案1】:好吧,我完全找不到 XPS 文档查看器示例或其他类似的东西,但我想出了this working sample
。它没有使用覆盖的想法,但它是一个可以调整大小的pdf...
edit 使这项工作没有覆盖的原因是将wmode
参数设置为transparent
。我对细节不是很熟悉,但它使它在 IE7 上运行良好。也适用于 Firefox、Chrome、Safari 和 Opera。
新编辑在使用框架时遇到严重问题。我发现的一些信息不是很令人鼓舞。用<object>
是不可能的吗?还是 iframe 中的 <object>
?
【讨论】:
给我几天时间来测试一下;该示例在 Flash 纸上看起来不错,但在 xps/pdf 上可能会出错。 用示例代码更新了问题。我没想到这可能是 iframe 搞砸了……【参考方案2】:我会回答覆盖,但会提供实际代码:P
我将其称为“follower”而不是 overlay,并在我的 ThreeSixty jQuery 插件中使用(提供了一些简单的源代码,您将了解阅读“follower”div 发生了什么。
http://www.mathieusavard.info/threesixty
【讨论】:
【参考方案3】:叠加。
禁止单字回答,此句无动词。
【讨论】:
对不起,我是菜鸟。欢迎使用代码示例,因为谷歌搜索 jquery 覆盖对我没有多大作用。 您可以简单地添加一个与对象重叠的隐藏覆盖元素,设置为 100% 高度/宽度,并在调整大小时切换它。如果这没有足够的信息继续下去,我会将伪代码作为单独的答案发布。 如果你能让它工作并演示它,那就接受赏金吧。我不能得到一个该死的覆盖来做杰克 shiznit。【参考方案4】:也许SmartLook 是另一种选择。它类似于那些灯箱脚本,但用于嵌入内容,例如 pdf。
【讨论】:
它很有趣,但是我不能在这个项目中使用它。谢谢你的信息。【参考方案5】:这对我有用,但在调整大小时会隐藏 iframe。这对你来说是个问题吗?
$(document).ready(function()
var obj = $('#docFrame');
$('#doc').resizable(
handles: 'all',
resize: function(e, ui)
$('#data').html(ui.size.width + 'x' + ui.size.height);
obj.attr( width: ui.size.width, height: ui.size.height );
,
start: function(e, ui) $('#docFrame').hide(); ,
stop: function(e, ui) $('#docFrame').show();
);
);
【讨论】:
因为他说“目前,我在移动时隐藏对象。我想知道是否有办法阻止对象捕获鼠标。”我第一次阅读时没有听到关于他目前的做法的评论。 :)【参考方案6】:使用 IE,您可以调用 setCapture()/releaseCapture(),它对我来说非常适合 iframe。
使用 Firefox -- 透明覆盖,如前所述。
【讨论】:
【参考方案7】:感谢 *** 的新“最近活动”功能,我看到您要求我提供代码示例。我只做了一些小测试(似乎无法让你的代码在 IE 中内联 PDF,大概它需要一个我没有安装的 PDF 插件),所以这可能行不通。但这是一个开始。
<div style="text-align: center; padding-top: 50px;">
<div id="doc" style="width: 384px; height: 512px; position: relative;">
<div id="overlay" style="position: absolute; top: -5px; left: -5px;
padding: 5px; width: 100%; height: 100%; background: red;
opacity: 0.5; z-index: 1; display: none;"></div>
<iframe id="docFrame" style="width: 100%; height: 100%; position: relative; z-index: 0;"
src='http://www.ready.gov/america/_downloads/sampleplan.pdf'></iframe>
</div>
</div>
<div id="data"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function()
var obj = $('#docFrame'), overlay = $('#overlay');
$('#doc').resizable(
handles: 'all',
start: function()
overlay.show();
,
resize: function(e, ui)
$('#data').html(ui.size.width + 'x' + ui.size.height);
obj.attr(
width: ui.size.width,
height: ui.size.height
);
,
stop: function(e, ui)
overlay.hide();
);
);
</script>
【讨论】:
我会测试一下。谢谢。此外,您可能想查看 PDF 的 foxit 插件。 adobe 的体面替代品,没有随之而来的所有废话。【参考方案8】:var dframe = $("#docFrame");
$(document).ready(function ()
var b = dframe;
$("#doc").e(
b: "all",
resize: function (c, a)
$("#data").html(a.size.width + "x" + a.size.height);
object.attr(
width: a.size.width,
height: a.size.height
);
,
start: function ()
dframe.hide();
,
stop: function ()
dframe.show();
);
);
【讨论】:
以上是关于使用jQuery防止元素“捕获”鼠标?的主要内容,如果未能解决你的问题,请参考以下文章
在没有jQuery的情况下悬停父绝对div的子元素时防止onmouseout
jquery如何animate防止叠加 例如我把鼠标不断移入移出 效果就会不断重复,如何防止呢?
使用 jquery 在 iframe 中捕获鼠标右键单击事件