요소가 jQuery를 사용하여 마우스를 "캡처"하는 것을 방지합니까?
-
05-07-2019 - |
문제
나는 내장 된 개체를 크기를 조정하려고합니다. 문제는 마우스가 물체 위로 맴돌 때 마우스의 "제어"를 취하여 움직임 이벤트를 삼키는 것입니다. 결과는 물체가 포함 된 DIV를 확장 할 수 있지만, 수축하려고 할 때 마우스가 물체의 영역에 들어가면 크기 조정이 중단됩니다.
현재 움직일 때 물체를 숨 깁니다. 물체가 마우스를 캡처하는 것을 막는 방법이 있는지 궁금합니다. 아마도 마우스 이벤트가 임베디드 물체에 도달하는 것을 방지하는 다른 요소를 오버레이할까요?
크기 조정에서 고스트링을 사용하는 것은 내장 된 물체 인 BTW에서 작동하지 않습니다.
내가이 일을 할 수없는 것처럼 보이기 때문에 현상금을 추가합니다. 수집하려면 다음을 수행하십시오.
페이지를 중심으로 PDF가 포함 된 웹 페이지를 제공하십시오. PDF는 전체 페이지를 가져갈 수 없습니다. 너비/높이를 50% 브라우저 창의 너비 또는 무언가로 만듭니다.
jQuery 1.2.6을 사용하여 PDF의 모든 측면과 모서리에 크기를 추가하십시오.
PDF는 마우스를 캡처하고 PDF를 축소 할 때 드래그를 중지해서는 안됩니다. 즉, PDF의 가장자리를 클릭하고 드래그하면 마우스가 PDF의 디스플레이 상자에 들어가면 크기 조정 작업이 계속됩니다.
이것은 IE 7에서 작동해야합니다. 조건부 CSS (GTE IE7 이상) 해킹은 괜찮습니다.
흠 ... 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에 길을 잃으면 크기 조정 작업이 중지됩니다.
좋은 대답이 있습니다. 현상금이 다 떨어지면 그들 모두를 심사하기 전에 모든 것을 심사 할 수 있습니다.
해결책
글쎄, 나는 완전히 XPS 문서 뷰어 예제를 찾을 수 없었지만 무엇을 생각해 낼 수있었습니다. this working sample
. 오버레이 아이디어를 사용하지는 않지만 크기를 조정할 수있는 PDF입니다.
편집하다 오버레이 없이이 작업을 만든 것은 wmode
매개 변수가 설정 중입니다 transparent
. 나는 세부 사항에 정말 익숙하지 않지만 IE7에서 멋지게 연주했습니다. 또한 Firefox, Chrome, Safari 및 Opera에서도 작동합니다.
새 편집 프레임으로 작동하는 데 심각한 어려움이 있습니다. 내가 찾은 일부 정보는 그다지 고무적이지 않습니다. 그것을 가지고있는 것은 불가능합니까? <object>
? 또는 <object>
Iframe 내부?
다른 팁
나는 오버레이에 대답하지만 실제 코드를 제공 할 것입니다 : P
나는 그것을 오버레이 대신 "팔로워"라고 부르며 jQuery의 Threeixty 플러그인에 사용됩니다 (간단한 소스 코드 제공 제공, 당신은 "추종자"div에 무슨 일이 일어나는지 읽는 것을 이해할 것입니다.
위에 까는 것.
한 단어는 금지되어 있으며,이 문장은 동사가 없습니다.
아마도 SmartLook 대안입니다. 그것은 Lightbox 스크립트와 같지만 PDF와 같은 내장 된 컨텐츠 용입니다.
비록 저에게 효과가있는 것은 다음과 같습니다. 그게 당신에게 문제가 있습니까?
$(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(); }
});
});
IE를 사용하면 setCapture ()/reeleasecapture ()를 호출 할 수 있습니다. iframes와 함께 잘 작동했습니다.
Firefox와 함께 - 이미 제안한대로 투명한 오버레이.
STACKOVERFLOW의 새로운 "최근 활동"기능 덕분에 코드 예제를 제공 해달라고 요청했습니다. 나는 작은 테스트 만했을 때 (즉, 코드가 PDF를 IE로 인라인 할 수는 없지만, 아마도 설치되지 않은 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>
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();
}
});
});