javascript - Internet Explorer 及其错误之一

标签 javascript html internet-explorer-11

由于我的上一篇文章很难理解,我会尝试再次解释我的问题,但这会更容易理解!

我正在使用 Internet Explorer 11(就个人而言,但也许客户不会使用此版本,我真的不知道)。

上下文: 我有一个 div,上面有另一个管理图片的页面,并且图片实际上比 div 大。所以我找到了一个脚本,允许我通过单击拖动在图片上移动(我有类似的最好的例子是GoogleMap,当您单击拖动时 map 会移动)。 在这张图片上,我有一张包含区域的 map (实际上,大约有 400 个区域),当我单击其中一个区域时,它会打开一个新的互联网页面(所有区域都包含超链接)。

问题:一切正常,除非我的光标移动到某个区域上方。当我这样做时(即使没有点击)页面似乎停止了,光标变成了不允许的光标,并且我在大约 4 秒内无法再移动。 4秒后,页面似乎自动刷新,然后页面又像什么都没发生一样工作,有时,IE崩溃,我不得不停止它。 这有点障碍,因为它使页面响应速度降低。

有人已经遇到这个错误了吗?

非常感谢!

(注意:如果有人要求我这样做,我会输入代码,但我不确定这在这种情况下是否真的重要:/)

现在是代码: 第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;

如果我理解得好的话,它是用来停止浏览器的默认工作的。与 event.stopPropagation 和 event.preventDefault 相关的东西。 我会对其进行其他搜索,但如果您也有类似的问题,这里是解决方案! :)

关于javascript - Internet Explorer 及其错误之一,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35865016/

相关文章:

javascript - 查找数组中项目的索引

javascript - 仅为 UL 的第一个元素添加类样式(JS 或 jquery)

javascript - 如何在图中显示多个节点内容(Cytoscape 样式表)

html - 具有 Logo 图像和固定高度的响应式导航栏

javascript - Z 索引不起作用

javascript - 如何使用 CSS 伪元素修复 IE 对换行符的支持?

javascript - 在使用 haxe-react 时它呈现字符串而不是组件?

javascript - 用css计算小宽度的边界半径

html - 外部 CSS 在 IE11 中不起作用

javascript - 无法绑定(bind)窗口方法: "Invalid calling object"