节在调整大小时总是增长——除非在调试模式下逐步执行代码
Section always grows when resizeing - except when in debug mode stepping through the code
我有一个奇怪的问题,我无法解决。
我在HTML文档中有一个部分,我通过拖动边框来调整其大小。
当我拖动左边框或下边框时,一切都很好,并且节的大小也正确。
当我拖动顶部或左侧边框时,框的大小总是会增加。除此之外,当我调试代码时,会逐行地执行。在这种情况下,框会随着鼠标的移动而正确地增长或收缩。
我猜事件模型中有一些东西,或者我不完全理解的风格调整。
这只是原型代码,我没有使用任何库(只是普通的JavaScript)。
// reSizeData is populated by mouse event that start the drag process. It contain the HTMLElement that are resized (node), and which border is being dragged (action)
var reSizeData = {node: null, action: "", inProgress: false}
function reSize(ev){
ev.stopPropagation();
var node = reSizeData.node;
if (node === undefined) return false;
var borderWidth = styleCoordToInt(getComputedStyle(node).getPropertyValue('border-left-width'));
// check and set the flag in reSizeData indicating that a resize is in progress.
// this makes repeated calls to be dropped until current resize event is complete.
if (reSizeData.inProgress === false) {
reSizeData.inProgress = true;
if (node.getBoundingClientRect) {
var rect = node.getBoundingClientRect();
switch (reSizeData.action) {
case "left" :
// this is only working while debugging
node.style.width = Math.max(rect.right - ev.clientX, 20) + 'px';
node.style.left = ev.clientX + 'px';
break;
case "right" :
// this working perfectly
node.style.width = Math.max(ev.clientX - rect.left - borderWidth, 20) + 'px';
break;
case "top":
// this is only working while debugging
node.style.height = Math.max(rect.bottom - ev.clientY, 20) + 'px';
node.style.top = ev.clientY + 'px';
break;
case "bottom":
// this is working perfectly
node.style.height = Math.max(ev.clientY - rect.top - borderWidth, 20) + 'px';
break;
}
// clear the resize in progress flag
reSizeData.inProgress = false;
}
}
};
我发现的问题是,我未能将鼠标坐标转换为样式坐标,这受到文档结构的影响。我仍然没有解决的问题是,在Firefox调试器中逐行执行代码时,代码为什么能工作。
相关文章:
- 我是否可以检测到javascript正在被卸载(作为调试模式)
- 注意:wp_enqueue_script调用不正确.在 Wordpress 调试模式下
- 如何在调试模式停止后查看Visual Studio 2015 Javascript控制台
- 两个选项卡—第一个选项卡在第二个选项卡中处于调试模式时被卡住
- 代码在调试模式下工作
- AJAX 在调试模式下工作,但不是实时的
- 代码仅在调试器模式下工作,断点位于 Consol.log否则不起作用
- 我们的文件不会在交叉骑士调试模式下更新
- 为什么预期值仅在我在调试模式下运行代码时出现,但在不调试时中断,以及如何解决此问题
- ExtJS应用程序在调试和缩小模式下的不同行为
- 节在调整大小时总是增长——除非在调试模式下逐步执行代码
- JavaScript 在调试模式下工作,但不能正常工作
- JS插入两个连续的文本节点在一个跨度不当时,不在调试模式
- Javascript仅在调试模式下运行
- 如果我应用断点并在调试模式下运行应用程序,则应用程序可以完美运行
- 为什么IE在调试模式下只是跳过错误,但没有调试就停止执行js
- Javascript在IE中挂起,除非处于调试模式
- Javascript只能在调试模式下在Google Chrome中工作
- W3学校模式的例子只在Chrome调试模式下工作
- 我应该使用IE9'还是IE8文档模式'调试IE8支持