Internet Explorer 及其漏洞之一
Internet explorer and one of its bug
由于我的最后一个 post 很难理解,我会尝试再次解释我的问题,但它会更容易理解!
我正在使用 Internet Explorer 11(个人,但可能客户不会使用这个版本,我不太清楚)。
上下文:
我有一个div,上面有另一个管理图片的页面,图片实际上比div大。所以我找到了一个脚本,允许我通过点击拖动在图片上移动(我有类似的最好的例子是 GoogleMap,当你点击拖动时地图移动)。
在这张图片上,我有一张带有区域的地图(实际上大约有 400 个区域),当我单击其中一个区域时,它会打开一个新的互联网页面(所有区域都包含超链接)。
问题:一切正常,除非我的光标移到某个区域上方。当我这样做时(即使没有点击)页面似乎停止了,光标变成了不允许的光标,我在大约 4 秒内不能再移动了。这 4 秒后,页面似乎自行刷新,然后页面又像什么都没发生过一样工作,有时,IE 崩溃,我不得不停止它。
这有点不利,因为它会降低页面的响应速度。
有人遇到过这个错误吗?
非常感谢!
(N.B :如果有人要求我放代码,但我不确定这在那种情况下是否真的很重要:/)
现在代码:
第 1 页:div 所在的页面:
<div id="one">
<iframe src="index.htm" style="width:100%; height:100%;" alt="" id="fram"> </iframe>
</div>
第 2 页:
function startDrag(e) {
// determine event object
if (!e) {
var e = window.event;
}
// IE uses srcElement, others use target
var targ = e.target ? e.target : e.srcElement;
if (targ.className != 'dragme') {return};
// calculate event X, Y coordinates
window.offsetX = e.clientX;
window.offsetY = e.clientY;
// assign default values for top and left properties
if(!targ.style.left) { targ.style.left='0px'};
if (!targ.style.top) { targ.style.top='0px'};
// calculate integer values for top and left
// properties
window.coordX = parseInt(targ.style.left);
window.coordY = parseInt(targ.style.top);
drag = true;
// move div element
document.onmousemove=dragDiv;
}
function dragDiv(e) {
if (!drag) {return};
if (!e) { var e= window.event};
var img = "SiteMap.png";
var targ=e.target?e.target:e.srcElement;
// move div element
if (coordX+e.clientX-offsetX < 0 && coordX+e.clientX-offsetX > -maxsizeX+divX){
targ.style.left=coordX+e.clientX-offsetX+'px';
}
if (coordY+e.clientY-offsetY< 0 && coordY+e.clientY-offsetY > -maxsizeY+divY){
targ.style.top=coordY+e.clientY-offsetY+'px';
}
return false;
}
function stopDrag() {
drag=false;
}
</head>
<body>
<img src="SiteMap.png" usemap="#TruView" id="draggable" class="dragme">
<map name="TruView">
<area title="P96N-P-1" shape="circle" coords="5091,347,16" href="P96N-P-1/TruView.xml" target="_blank">
<area title="P96N-P-2" shape="circle" coords="5105,490,16" href="P96N-P-2/TruView.xml" target="_blank">
<area title="P96N-P-3" shape="circle" coords="5112,682,16" href="P96N-P-3/TruView.xml" target="_blank">
<area title="P96N-P-4" shape="circle" coords="5123,808,16" href="P96N-P-4/TruView.xml" target="_blank">
<area title="P604-P-1" shape="circle" coords="5105,933,16" href="P604-P-1/TruView.xml" target="_blank">
<area title="P604-P-2" shape="circle" coords="5029,968,16" href="P604-P-2/TruView.xml" target="_blank">
<area title="P604-P-3" shape="circle" coords="5033,1124,16" href="P604-P-3/TruView.xml" target="_blank">
<area title="P604-P-4" shape="circle" coords="5100,1168,16" href="P604-P-4/TruView.xml" target="_blank">
<area title="P98-P-1" shape="circle" coords="5096,1379,16" href="P98-P-1/TruView.xml" target="_blank">
<area title="P98-P-2" shape="circle" coords="5023,1322,16" href="P98-P-2/TruView.xml" target="_blank">
<area title="P98-P-3" shape="circle" coords="5094,1351,16" href="P98-P-3/TruView.xml" target="_blank">
<area title="P98-P-4" shape="circle" coords="5098,1507,16" href="P98-P-4/TruView.xml" target="_blank">
<area title="P98-P-5" shape="circle" coords="5086,1628,16" href="P98-P-5/TruView.xml" target="_blank">
<area title="P98-P-6" shape="circle" coords="5088,1592,16" href="P98-P-6/TruView.xml" target="_blank">
...
我会做出此回复,因为我已了解如何使其正常运行!
问题来自:
function dragDiv(e) {
if (!drag) {return }; // <- HERE! You have to return false, instead of just return
if (!e) { var e= window.event};
//var img = "SiteMap.png";
var targ=e.target?e.target:e.srcElement;
如果我没看错的话,它是用来停止浏览器的默认工作的。 link 与 event.stopPropagation 和 event.preventDefault 中的内容。
我将对其进行其他搜索,但这是解决方案,如果您也有类似的东西! :)
由于我的最后一个 post 很难理解,我会尝试再次解释我的问题,但它会更容易理解!
我正在使用 Internet Explorer 11(个人,但可能客户不会使用这个版本,我不太清楚)。
上下文: 我有一个div,上面有另一个管理图片的页面,图片实际上比div大。所以我找到了一个脚本,允许我通过点击拖动在图片上移动(我有类似的最好的例子是 GoogleMap,当你点击拖动时地图移动)。 在这张图片上,我有一张带有区域的地图(实际上大约有 400 个区域),当我单击其中一个区域时,它会打开一个新的互联网页面(所有区域都包含超链接)。
问题:一切正常,除非我的光标移到某个区域上方。当我这样做时(即使没有点击)页面似乎停止了,光标变成了不允许的光标,我在大约 4 秒内不能再移动了。这 4 秒后,页面似乎自行刷新,然后页面又像什么都没发生过一样工作,有时,IE 崩溃,我不得不停止它。 这有点不利,因为它会降低页面的响应速度。
有人遇到过这个错误吗?
非常感谢!
(N.B :如果有人要求我放代码,但我不确定这在那种情况下是否真的很重要:/)
现在代码: 第 1 页:div 所在的页面:
<div id="one">
<iframe src="index.htm" style="width:100%; height:100%;" alt="" id="fram"> </iframe>
</div>
第 2 页:
function startDrag(e) {
// determine event object
if (!e) {
var e = window.event;
}
// IE uses srcElement, others use target
var targ = e.target ? e.target : e.srcElement;
if (targ.className != 'dragme') {return};
// calculate event X, Y coordinates
window.offsetX = e.clientX;
window.offsetY = e.clientY;
// assign default values for top and left properties
if(!targ.style.left) { targ.style.left='0px'};
if (!targ.style.top) { targ.style.top='0px'};
// calculate integer values for top and left
// properties
window.coordX = parseInt(targ.style.left);
window.coordY = parseInt(targ.style.top);
drag = true;
// move div element
document.onmousemove=dragDiv;
}
function dragDiv(e) {
if (!drag) {return};
if (!e) { var e= window.event};
var img = "SiteMap.png";
var targ=e.target?e.target:e.srcElement;
// move div element
if (coordX+e.clientX-offsetX < 0 && coordX+e.clientX-offsetX > -maxsizeX+divX){
targ.style.left=coordX+e.clientX-offsetX+'px';
}
if (coordY+e.clientY-offsetY< 0 && coordY+e.clientY-offsetY > -maxsizeY+divY){
targ.style.top=coordY+e.clientY-offsetY+'px';
}
return false;
}
function stopDrag() {
drag=false;
}
</head>
<body>
<img src="SiteMap.png" usemap="#TruView" id="draggable" class="dragme">
<map name="TruView">
<area title="P96N-P-1" shape="circle" coords="5091,347,16" href="P96N-P-1/TruView.xml" target="_blank">
<area title="P96N-P-2" shape="circle" coords="5105,490,16" href="P96N-P-2/TruView.xml" target="_blank">
<area title="P96N-P-3" shape="circle" coords="5112,682,16" href="P96N-P-3/TruView.xml" target="_blank">
<area title="P96N-P-4" shape="circle" coords="5123,808,16" href="P96N-P-4/TruView.xml" target="_blank">
<area title="P604-P-1" shape="circle" coords="5105,933,16" href="P604-P-1/TruView.xml" target="_blank">
<area title="P604-P-2" shape="circle" coords="5029,968,16" href="P604-P-2/TruView.xml" target="_blank">
<area title="P604-P-3" shape="circle" coords="5033,1124,16" href="P604-P-3/TruView.xml" target="_blank">
<area title="P604-P-4" shape="circle" coords="5100,1168,16" href="P604-P-4/TruView.xml" target="_blank">
<area title="P98-P-1" shape="circle" coords="5096,1379,16" href="P98-P-1/TruView.xml" target="_blank">
<area title="P98-P-2" shape="circle" coords="5023,1322,16" href="P98-P-2/TruView.xml" target="_blank">
<area title="P98-P-3" shape="circle" coords="5094,1351,16" href="P98-P-3/TruView.xml" target="_blank">
<area title="P98-P-4" shape="circle" coords="5098,1507,16" href="P98-P-4/TruView.xml" target="_blank">
<area title="P98-P-5" shape="circle" coords="5086,1628,16" href="P98-P-5/TruView.xml" target="_blank">
<area title="P98-P-6" shape="circle" coords="5088,1592,16" href="P98-P-6/TruView.xml" target="_blank">
...
我会做出此回复,因为我已了解如何使其正常运行!
问题来自:
function dragDiv(e) {
if (!drag) {return }; // <- HERE! You have to return false, instead of just return
if (!e) { var e= window.event};
//var img = "SiteMap.png";
var targ=e.target?e.target:e.srcElement;
如果我没看错的话,它是用来停止浏览器的默认工作的。 link 与 event.stopPropagation 和 event.preventDefault 中的内容。 我将对其进行其他搜索,但这是解决方案,如果您也有类似的东西! :)