旧版浏览器中的高效元素定位

Efficient element positioning in older browsers

本文关键字：高效 元素 定位 浏览器      更新时间：2023-09-26

>我目前正在为一个必须与IE7以上兼容的客户端构建一个相当雄心勃勃的交互式墙。

它基本上是一个大的、可拖动的六边形网格，使用 Raphael.js 绘制。网格的大小取决于屏幕大小，但在大多数情况下不会超过 ~2500 个 SVG 元素。

在现代浏览器（包括IE9）中拖动包含的DIV时，它像黄油一样光滑。在IE7和IE8中，情况并非如此！

必须支持较旧的浏览器意味着没有CSS3支持，因此没有CSS转换支持。因此，我不得不更新 CSS 左侧和顶部属性来定位元素。

在这些旧浏览器中，有没有更有效的方法来移动大元素？我注意到慢慢拖拽是相当平滑的，而快速拖拽会杀死东西。我尝试限制每秒处理拖动事件的次数，但这并没有太大影响。

我的主要选择是禁用IE7/8中的拖动或减小主元素的大小。这些都不是理想的，但到目前为止，这些是我唯一的选择。

我认为这是一个很长的机会，但任何建议都会很棒！

如何限制执行？ 这实际上意味着div 仅在您停止移动鼠标时才定位，并且不会随着 Moouse 光标一起移动......

所以做类似的事情

var timeout;
$("#element").mouseover(function() {
  if ([ie_lte_9]) {
    clearTimeout(timeout);
    timeout = setTimeout(doDrag, 10);
  } else {
    doDrag();
  }
});

的源鼠标悬停可能是代码中的另一种事件类型，doDrag 被称为不同的方式......"[ie_lte_9]"仅表示您需要检测 Internet Explorer <9

在这里回答我自己的问题，我想如果其他人有类似的问题，他们可能会偶然发现这个问题，这会很有帮助......

在我的拖动函数（movemove事件）中，我未能包含stopPropagation或preventDefault（）调用。添加了这些，性能大大提高！

相关文章：